LinkTabs
Markdown for agentsURL-driven navigation tabs for settings, account, and app sub-navigation. Real links, aria-current, and prefix/exact matching.
npx @slipstream-ui/cli@latest add link-tabsSettings navigation
Current path: /docs/components/link-tabs
Underline strip
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | LinkTabsItem[] | — | Tabs with label, href, exact, icon, disabled. |
| activeHref | string | — | Current pathname used to mark the active tab. |
| linkComponent | React.ElementType | — | Router link element; defaults to an anchor. |
| variant | 'default' | 'underline' | 'rounded' | 'default' | Strip design. |
| size | 'sm' | 'md' | 'lg' | 'md' | Control density. |
| label | string | 'Section' | Accessible name for the navigation landmark. |
Accessibility
- Renders a nav landmark with an accessible label.
- The active link receives aria-current="page".
- Disabled items render as spans with aria-disabled and no link.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.