Tabs

catnip-tabs is a horizontal tab rail: every item is a button (or a menu trigger with button rows). Bind modelValue for the active tab or submenu row value, and use @update:modelValue to drive in-page panels or client-side routing (no full document reload). Set aria-label on the nav when context is not obvious.

Live example

The Configuration panel edits a single live catnip-tabs: the default items JSON is a hybrid example (Overview / Secrets / Permissions with a menu). Change modelValue to match a top-level value or a submenu row value for correct active styling.

Changing the URL without a full reload

Handle @update:modelValue and call your router (for example VitePress useRouter().go(withBase(path)), or Vue Router push) so the address bar updates while staying in SPA mode.

Accessibility

• Set aria-label on catnip-tabs when the tab purpose is not obvious from surrounding text.
• The list uses role="tablist" when there is at least one item; triggers use role="tab" and aria-selected where applicable.
• Menu tab: trigger uses aria-haspopup="menu", aria-expanded, and aria-controls; the panel uses role="menu" and rows role="menuitem".