Dock
Fixed bottom navigation bar for mobile app shells with up to 5 items
Category: navigation · WCAG 2.2-AA · dock, tab-bar, bottom-nav, mobile, navigation, app-shell
States
- default
- active
Props
| Prop | Type | Default | Description |
|---|---|---|---|
ariaLabel | string | — | Accessible label for the dock navigation; defaults to the built-in i18n string. |
items | DockItem[] | — | Navigation items, each with a label, icon, and optional href or onClick |
activeIndex | number | — | Index of the currently active item (0-based) |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-surface--cascivo-color-accent--cascivo-color-text-muted--cascivo-border-subtle--cascivo-ring-width--cascivo-ring-color--cascivo-ease-out--cascivo-target-min-coarse--cascivo-z-dock
When to use
- Mobile app-shell navigation with 3–5 top-level destinations
- When the primary navigation must be thumb-reachable on small screens
When not to use
- Desktop navigation — the dock hides at the lg breakpoint (64rem)
- More than 5 items — labels become unreadable and tap targets too small
- Secondary or contextual navigation — use Tabs or SideNav instead
How to build an accessible Dock in React →
Examples
Basic mobile dock
Fixed bottom navigation for a mobile app shell
<Dock
activeIndex={0}
items={[
{ label: 'Home', icon: '🏠', onClick: () => navigate('/') },
{ label: 'Search', icon: '🔍', onClick: () => navigate('/search') },
{ label: 'Profile', icon: '👤', onClick: () => navigate('/profile') },
]}
/>With hrefs
Link-based dock items for standard navigation
<Dock
activeIndex={1}
items={[
{ label: 'Feed', icon: '📰', href: '/feed' },
{ label: 'Explore', icon: '🌐', href: '/explore' },
{ label: 'Notifications', icon: '🔔', href: '/notifications' },
{ label: 'Profile', icon: '👤', href: '/profile' },
]}
/>