Tabs
Switch between views. Underlined, boxed (segmented), pill and vertical variants; full WAI-ARIA keyboard support.
Underlined
Make changes to your account here.
Change your password here.
Choose what we email you about.
<div class="mn-tabs">
<div class="mn-tab-list" aria-label="Account">
<button class="mn-tab" aria-selected="true">Account</button>
<button class="mn-tab">Password</button>
<button class="mn-tab">Notifications</button>
</div>
<div class="mn-tab-panel">Make changes to your account here.</div>
<div class="mn-tab-panel">Change your password here.</div>
<div class="mn-tab-panel">Choose what we email you about.</div>
</div>Boxed
Daily figures.
Weekly figures.
Monthly figures.
Yearly figures.
<div class="mn-tabs mn-tabs-boxed">
<div class="mn-tab-list" aria-label="Period">
<button class="mn-tab">Day</button><button class="mn-tab" aria-selected="true">Week</button><button class="mn-tab">Month</button><button class="mn-tab">Year</button>
</div>
<div class="mn-tab-panel">Daily figures.</div><div class="mn-tab-panel">Weekly figures.</div><div class="mn-tab-panel">Monthly figures.</div><div class="mn-tab-panel">Yearly figures.</div>
</div>Pills with icons
Overview content.
Analytics content.
Reports content.
<div class="mn-tabs mn-tabs-pills">
<div class="mn-tab-list" aria-label="Media">
<button class="mn-tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11 12 3l9 8"/><path d="M5 10v10h14V10"/></svg> Overview</button><button class="mn-tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg> Analytics</button><button class="mn-tab"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z"/><path d="M14 3v5h5"/></svg> Reports</button>
</div>
<div class="mn-tab-panel">Overview content.</div><div class="mn-tab-panel">Analytics content.</div><div class="mn-tab-panel">Reports content.</div>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/tabs.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-tabs | Container. |
| mn-tab-list · mn-tab · mn-tab-panel | Parts. mian.js adds the roles and ids. |
| mn-tabs-boxed · mn-tabs-pills · mn-tabs-vertical | Variants. |
Accessibility
- role="tablist", "tab", "tabpanel" with aria-controls, aria-labelledby and aria-selected. Arrow keys, Home and End move and activate; Tab moves into the panel.