BottomNav
Markdown for agentsMobile bottom tab bar for the 3-5 primary destinations of an app shell, with an active tab, count badges and safe-area padding.
npx @slipstream-ui/cli@latest add bottom-navApp shell tabs
Disabled tab
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BottomNavItem[] | required | Tabs in order: href, label, optional icon, active, badge and disabled. |
| linkComponent | React.ElementType | — | Router link component (Next Link, react-router Link). |
| linkHrefProp | 'href' | 'to' | 'href' | Prop used to pass the destination to linkComponent. |
| label | string | 'Primary' | Accessible label for the nav landmark. |
| fixed | boolean | true | Pin the bar to the bottom edge with safe-area padding. |
| mobileOnly | boolean | true | Hide the bar from the md breakpoint up. |
Accessibility
- Renders a nav landmark named by label (default "Primary").
- Only the active tab carries aria-current="page".
- Every tab is at least 56px tall with a 44px minimum target.
- env(safe-area-inset-bottom) keeps the bar clear of the iOS home indicator.
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.