Tabs
Switches between views of one object.
<mm-tabs label="Asset views" value="schema">
<mm-tab value="documentation" icon="description">Documentation</mm-tab>
<mm-tab value="schema" icon="schema" count="14">Schema</mm-tab>
<mm-tab value="lineage" icon="account-tree">Lineage</mm-tab>
<mm-tab value="runs" icon="history" count="30">Run history</mm-tab>
<mm-tab-panel value="documentation">…</mm-tab-panel>
<mm-tab-panel value="schema">…</mm-tab-panel>
<mm-tab-panel value="lineage">…</mm-tab-panel>
<mm-tab-panel value="runs">…</mm-tab-panel>
</mm-tabs>
Guidance
Tabs switch between views of one object, such as an asset's documentation, metadata, schema,
lineage and run history. Labels are 13px with a 16px icon, mm-text-2 when inactive; the active
tab is ink with a 2px burnt-sienna underline inset from its edges. Counts sit in mono, muted and
tabular. Switching is instant: there is no sliding indicator.
Keyboard follows the WAI-ARIA tabs pattern (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): the
strip is one tab stop; Left and Right move between tabs (flipped in right-to-left), Home and End go
to the first and last. With activation="auto" (default) moving focus selects the tab. With
activation="manual" focus moves without selecting, and Enter or Space selects: use it for heavy
panels such as lineage, so arrowing past them does not render them.
Overflow: when there are more than max-visible tabs (default 6), or the tabs do not fit the
width, the rest move into a "More" menu button at the end of the strip. Choosing one selects it
and swaps it into the strip, so the selected tab is always visible. The More button is its own tab
stop after the tablist, outside the tablist so the tablist only contains tabs.
Link tabs: give each mm-tab an href for URL-driven tabs (for example /assets/orders_daily/schema).
The strip then renders as a nav of links with aria-current="page" on the selected one, not as an
ARIA tablist. This is a deliberate trade-off: link tabs are navigation. Each link is a tab stop,
arrow keys do nothing, the page changes on activation, and screen readers announce links rather
than "tab 3 of 9". Use them when each view needs its own URL; use ARIA tabs for in-page views.
Set value from the current route so the right link is marked.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The selected tab's value. Defaults to the first enabled tab. |
activation | activation | 'auto' | 'manual' | 'auto' | auto (default) selects on focus; manual selects on Enter or Space. |
label | label | string | '' | Accessible name for the tablist, such as "Asset views". Required in link mode, where it names the nav. |
maxVisible | max-visible | number | 6 | Most tabs shown before the rest move into the More menu. |
tabs | MmTab[] | Every tab, in order. | ||
panels | MmTabPanel[] | Every panel. |
Methods
| Method | Description |
|---|---|
requestLayout() | Re-measures the strip and moves tabs into or out of the More menu. Called for you on resize and content changes. |
select() | Selects a tab by value, as if the user had chosen it, and fires mm-tab-change. |
Events
| Event | Detail | Description |
|---|---|---|
mm-tab-change | CustomEvent<MmTabChangeDetail> | The selected tab changed by user action. |
Slots
| Slot | Description |
|---|---|
| Default | mm-tab and mm-tab-panel elements, in any order. They place themselves. |
CSS parts
| Part | Description |
|---|---|
bar | The strip with its bottom hairline. |
tablist | The tablist (or the link list in link mode). |
more | The overflow menu button. |
Examples
Every state of mm-tabs in Storybook, with keyboard and screen reader tests.