tabler/docs/content/ui/components/tab.mdx

---
title: Tab
summary: Tabs switch between related views in the same place on the page. They can hold icons, a dropdown or fill the full width.
description: Split content into tabs so users can switch between related views in the same context. Add icons or style the tabs as pills.
related: [/ui/layout/navs-tabs]
source: core/scss/ui/_nav.scss
css-vars: nav-tabs
sass-vars: nav
classnames:
  component:
    - class: nav-tabs
      desc: Applied with nav, styles the triggers as tabs
  part:
    - class: nav-link
      desc: One tab trigger; needs role="tab" and aria-controls
    - class: tab-content
      desc: Wrapper around the panels
    - class: tab-pane
      desc: One panel; needs role="tabpanel"
  style:
    - class: nav-underline
      desc: Underline marker instead of a filled tab
    - class: nav-bordered
      desc: Bordered tab style
  modifier:
    - class: nav-fill
      desc: Spreads the tabs across the full width
---
import Example from '@components/Example.astro';
import Icon from '@ui/Icon.astro';
import CodeDocs from '@components/CodeDocs.astro';

## Default markup

The default tabs highlight the current one. Each tab trigger points at a panel, and Bootstrap shows one panel at a time.

<Example>
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
      <li class="nav-item">
        <a href="#tabs-home-ex1" class="nav-link active" data-bs-toggle="tab">Home</a>
      </li>
      <li class="nav-item">
        <a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane active show" id="tabs-home-ex1">
        <h4>Home tab</h4>
        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
      </div>
      <div class="tab-pane" id="tabs-profile-ex1">
        <h4>Profile tab</h4>
        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
      </div>
    </div>
  </div>
</div>
</Example>

## Tabs with icons

An [icon](/ui/components/icon) in the tab label makes tabs easier to tell apart when the labels are similar.

<Example>
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
      <li class="nav-item">
        <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"> <Icon name="home" class="me-2" /> Home </a>
      </li>
      <li class="nav-item">
        <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"> <Icon name="user" class="me-2" /> Profile </a>
      </li>
      <li class="nav-item ms-auto">
        <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
            <circle cx="12" cy="12" r="3" />
          </svg>
        </a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane active show" id="tabs-home-ex2">
        <h4>Home tab</h4>
        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
      </div>
      <div class="tab-pane" id="tabs-profile-ex2">
        <h4>Profile tab</h4>
        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
      </div>
      <div class="tab-pane" id="tabs-settings-ex2">
        <h4>Settings tab</h4>
        <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
      </div>
    </div>
  </div>
</div>
</Example>

## Tabs only with icons

Tabs with only an icon save space. Give each one an `aria-label`, because there's no text to read.

<Example>
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
      <li class="nav-item">
        <a href="#tabs-home-ex3" class="nav-link active" data-bs-toggle="tab">
          <Icon name="home" />
        </a>
      </li>
      <li class="nav-item">
        <a href="#tabs-profile-ex3" class="nav-link" data-bs-toggle="tab"><Icon name="user" /></a>
      </li>
      <li class="nav-item ms-auto">
        <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab">
          <Icon name="settings" />
        </a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane active show" id="tabs-home-ex3">
        <h4>Home tab</h4>
        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
      </div>
      <div class="tab-pane" id="tabs-profile-ex3">
        <h4>Profile tab</h4>
        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
      </div>
      <div class="tab-pane" id="tabs-settings-ex3">
        <h4>Settings tab</h4>
        <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
      </div>
    </div>
  </div>
</div>
</Example>

## Tabs with dropdown

A tab can open a [dropdown](/ui/components/dropdown) with more views, so a long row of tabs stays short.

<Example>
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
      <li class="nav-item">
        <a href="#tabs-home-ex4" class="nav-link active" data-bs-toggle="tab">Home</a>
      </li>
      <li class="nav-item">
        <a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
        </div>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane active show" id="tabs-home-ex4">
        <h4>Home tab</h4>
        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
      </div>
      <div class="tab-pane" id="tabs-profile-ex4">
        <h4>Profile tab</h4>
        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
      </div>
    </div>
  </div>
</div>
</Example>

## Full-width tabs

Add the `.nav-fill` class to make the tabs take up the full space of the parent element.

<Example>
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs">
      <li class="nav-item">
        <a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab">
          <Icon name="home" />
        </a>
      </li>
      <li class="nav-item">
        <a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"><Icon name="user" /></a>
      </li>
      <li class="nav-item">
        <a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab">
          <Icon name="activity" />
        </a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane active show" id="tabs-home-ex5">
        <h4>Home tab</h4>
        <div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
      </div>
      <div class="tab-pane" id="tabs-profile-ex5">
        <h4>Profile tab</h4>
        <div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
      </div>
      <div class="tab-pane" id="tabs-activity-ex5">
        <h4>Activity tab</h4>
        <div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
      </div>
    </div>
  </div>
</div>
</Example>

## JavaScript

Tabler activates the tab that matches the URL hash on page load, so you can link to a specific tab. This is the code that runs:

<CodeDocs name="tab-init" file="core/js/src/tab.ts" />

## Accessibility

- Wrap the tabs in an element with `role="tablist"`, give each trigger `role="tab"` and each panel `role="tabpanel"`, and link them with `aria-controls` and `aria-labelledby`.
- Bootstrap sets `aria-selected` and moves focus with the arrow keys, but only when the roles above are present. Without them the tabs are plain links.
- Tabler activates a tab from the url hash on page load, so a tab trigger with `href="#billing"` doubles as a deep link. Keep the panel ids stable if you link to them.
- Only the active panel should be reachable. Bootstrap hides the others with `display: none`, which also removes them from the tab order.