# Tabs · MIAN

Switch between views. Underlined, boxed (segmented), pill and vertical variants; full WAI-ARIA keyboard support.

- Id: `tabs` · Category: Navigation · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/tabs
- Use for: tabs, switch views, segmented tabs, settings sections.
- Alternatives: toggle-group.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `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.

## Examples

### Underlined

```html
<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

```html
<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

```html
<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>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/tabs/source