NavigationBrowse navigation components
Tabs
Tab list with underline + pills variants, 3 sizes, and disabled support.
Live preview
Variants & states
Pills
Usage
Adapters:React stableVue stable
index.html
<div class="lm-tabs" role="tablist">
<button class="lm-tab" role="tab" aria-selected="true">Overview</button>
<button class="lm-tab" role="tab">Activity</button>
</div>CSS classes (4)
| Class | Description |
|---|---|
lm-tabs | Tab list container |
lm-tabs-pills | Rounded segmented variant |
lm-tab | Each tab button |
lm-tab-{size} | sm | md | lg |
React props (2)
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Active tab id |
size | Size | md | — |
Accessibility
- Use role='tablist' / 'tab' / 'tabpanel'.
- Roving tabindex; Home / End / Arrow keys.
- aria-controls links tabs to their panels.
Spotted something wrong? Edit this entry on GitHub.