Tabs

A set of layered sections of content that are displayed one at a time.

Account

Make changes to your account here. Click save when you're done.

Usage

HTML + JavaScript

Step 1: Include the JavaScript files

You can either include the JavaScript file for all the components, or just the one for this component by adding this to the <head> of your page:

<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/basecoat.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.0/dist/js/tabs.min.js" defer></script>
Components with JavaScript Use the CLI tabs.js

Step 2: Add your tabs HTML

<div class="tabs w-full" id="demo-tabs-with-panels">
  <nav role="tablist" aria-orientation="horizontal" class="w-full">
    <button type="button" role="tab" id="demo-tabs-with-panels-tab-1" aria-controls="demo-tabs-with-panels-panel-1" aria-selected="true" tabindex="0">Account</button>
    <button type="button" role="tab" id="demo-tabs-with-panels-tab-2" aria-controls="demo-tabs-with-panels-panel-2" aria-selected="false" tabindex="-1">Password</button>
  </nav>
  <div role="tabpanel" id="demo-tabs-with-panels-panel-1" aria-labelledby="demo-tabs-with-panels-tab-1" tabindex="-1" aria-selected="true">
    <div class="card">
      <header>
        <h2>Account</h2>
        <p>Make changes to your account here. Click save when you're done.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-account-name">Name</label>
            <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-account-username">Username</label>
            <input type="text" id="demo-tabs-account-username" value="@peduarte" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save changes</button>
      </footer>
    </div>
  </div>
  <div role="tabpanel" id="demo-tabs-with-panels-panel-2" aria-labelledby="demo-tabs-with-panels-tab-2" tabindex="-1" aria-selected="false" hidden>
    <div class="card">
      <header>
        <h2>Password</h2>
        <p>Change your password here. After saving, you'll be logged out.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-password-current">Current password</label>
            <input type="password" id="demo-tabs-password-current" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-password-new">New password</label>
            <input type="password" id="demo-tabs-password-new" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save password</button>
      </footer>
    </div>
  </div>
</div>

HTML structure

<div class="tabs">
Root tabs container. It becomes horizontal or vertical based on the child tablist's aria-orientation.
<nav role="tablist" aria-orientation="horizontal">
Tablist containing tab buttons. Set aria-orientation="vertical" for vertical tabs and data-variant="line" for the line style.
<button role="tab" id="{ TAB_ID }" aria-controls="{ PANEL_ID }" aria-selected="true" tabindex="0">
Tab trigger. The active tab has aria-selected="true" and tabindex="0". Inactive tabs use tabindex="-1". Disabled tabs use disabled or aria-disabled="true".
<div role="tabpanel" id="{ PANEL_ID }" aria-labelledby="{ TAB_ID }">
Panel controlled by a tab. Inactive panels are hidden.

JavaScript API

basecoat:initialized
Once the component is initialized, it dispatches a custom non-bubbling basecoat:initialized event on itself.
tabs.select(tab)
Selects a tab button in the tablist.
tabs.refresh()
Rescans tabs and panels after changing children inside the existing tablist/panel structure.
window.basecoat.refresh(tabs)
Calls the component refresh method through the global dispatcher.

Jinja and Nunjucks

You can use the tabs() Nunjucks or Jinja macro for this component.

Use Nunjucks or Jinja macros Jinja macro Nunjucks macro 
{{ tabs(
  id="account-tabs",
  tabsets=[
    { tab: "Account", panel: account_panel },
    { tab: "Password", panel: password_panel }
  ],
  tablist_attrs={ "data-variant": "line" }
) }}

Examples

Line

Make changes to your account here.

Vertical

Manage account settings.

Disabled

Account content.

Icons

Account content.

RTL

Tabs support document direction. Set dir="rtl" on the tabs root or a parent element.

إعدادات الحساب.

API Reference

.tabs
Root component class.
[role="tablist"]
Tablist. Supports aria-orientation="horizontal", aria-orientation="vertical", and data-variant="line".
[role="tab"]
Tab trigger. Supports aria-selected, disabled, and aria-disabled="true".
[role="tabpanel"]
Tab panel associated with a tab by aria-controls and aria-labelledby.