Navigation

Tabs

Tabs - Tab navigation component refactored for Material 3 Provides tabbed navigation with optional counts and content slots. Accessibility: - Supports keyboard navigation with Arrow keys - Proper ARIA roles: tablist, tab, tabpanel - aria-selected indicates active tab - aria-controls links tab to panel Link tabs: give every tab an `href` and the row renders as navigation — a `<nav>` of links with `aria-current="page"` on the active one, each tab its own URL (a content item's Article / Images / Review pages). With `maxVisible`, extra link tabs move to a "More" menu while the active tab always stays in the row; `badge` marks a tab needing attention (and puts a dot on "More" when a hidden tab has one). The row scrolls sideways on phones and keeps the active tab scrolled into view. It carries `data-shell-tabs`, so AdminShell keeps it sticky under its phone top bar.

Public export

typescript

import { Tabs } from '@happyvertical/smrt-ui';

Import path: @happyvertical/smrt-ui
Props: 10
Props described: 10 of 10
Bindable state: 0
Callback events: 1
Verified release: 0.57.40

Props

NameTypeRequiredDescription

tabsTab[]YesAvailable tabs

activestringYesCurrently active tab id

onchange(id: string) => voidNoCalled when tab changes

size'sm' | 'md' | 'lg'NoSize variant

variant'primary' | 'secondary'NoVisual variant

childrenSnippetNoTab content slot

aria-labelstringNoAccessible label for the tablist

maxVisiblenumberNoLink tabs only: most tabs shown in the row; the rest go under "More".

moreLabelstringNoLink tabs only: label of the overflow menu (default "More").

moreBadgeLabelstringNoLink tabs only: screen-reader text for the "More" attention dot.

Public export

Props

Bindable state

Callback events

Examples and explanation