tabs — mica

Examples

Default

Account settings panel.

Password panel. Try the arrow keys — roving tabindex, automatic activation.

Team panel.

Underline

Overall leaders.

Attacking leaders.

Passing leaders.

Defending leaders.

Goalkeeping leaders.

Basic usage

<m-tabs variant="underline">
  <nav aria-label="Leader category">
    <button>Overall</button>
    <button selected>Attacking</button> <!-- optional initial -->
  </nav>
  <section>&#8230;overall panel&#8230;</section>
  <section>&#8230;attacking panel&#8230;</section>
</m-tabs>

<script type="module" src="mica/tabs.js"></script>

API

Attributes

Name	Type	Default	Description
`variant`	`underline`	segmented	Uses the quieter underline treatment without changing behavior.
`selected`	boolean on a tab button	first tab	Chooses the optional initial tab before enhancement.
`aria-controls`	panel ID	positional pairing	Explicitly pairs a button with a panel.

Content/markup contract

Part	Contract	Default	Description
`nav`	direct child	required	Contains tab buttons.
`button`	inside nav	required	Pairs positionally with a direct panel unless `aria-controls` names one.
`section`	direct child	required	Panel content. Keep all content complete and readable without enhancement.

`tabs.js`

Optional enhancement that registers m-tabs. It wires tablist, tab, and tabpanel roles; aria-selected; roving tabindex; Arrow Left/Right, Home, and End keys with automatic activation; selected-tab reveal; and position-aware overflow markers.

<script type="module" src="mica/tabs.js"></script>

Without the module, the nav is inert and every panel renders in order: complete, readable content rather than a CSS-only fake.

Script interface

Name	Type	Description
`m-on-change`	event, bubbles	Fires when the user selects a different tab by click or key. `detail.index` is the new tab's position. Other components fire their own `m-on-change` (a combobox in a panel, nested tabs), so check `event.target` is your tabs element.
`selectedIndex`	read-only number	Position of the selected tab, or `-1` before enhancement.
`select(index)`	method	Selects a tab from script. Silent: it fires no `m-on-change`, like setting a native value. An index with no tab is ignored.

Tabs and panels may be added or removed after enhancement, for example by a framework or a server fragment. The element rescans and keeps the current selection; changes inside a panel don't trigger a rescan. If the selected tab is removed, the element falls back to the first tab without an event: the script that removed it picks the next selection.

Accessibility

The module establishes native ARIA tabs semantics, labels each panel from its button, makes panels focusable, and manages keyboard focus and selection. The unenhanced fallback exposes every panel in document order.

Horizontal overflow

Tab labels never wrap. When the rail is narrower than its tabs, the nav scrolls horizontally with contained overscroll. With tabs.js, a direction marker fades in only on a side with more tabs, selecting a partially visible tab brings it fully into view, and an initial selected tab past the edge is scrolled into view on load. The scrollbar stays hidden, but touch, wheel, and keyboard scrolling still work.

The rail is constrained to 20rem; tabs keep their intrinsic width and overflow scrolls.

Attacking leaders.

Passing leaders.

Defending leaders.

Goalkeeping leaders.

Use tabs for in-page panels. Route navigation and deep links should remain ordinary anchors outside m-tabs, so URLs, open-in-new-tab behavior, and routing stay consumer-owned.