How to build an accessible Dock in React

Wrapped in <nav> with aria-label; active item carries aria-current="page"; renders as <a> for href items and <button> for onClick items to preserve native semantics

When to use a Dock

• 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 it

• 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

Keyboard interactions

Role navigation, verified at WCAG 2.2-AA.

• Tab
• Enter

Common mistakes

Avoid: Putting more than 5 items in the Dock

Prefer: Use an overflow menu or drawer for additional destinations

Tap targets become too small and labels collide on narrow screens

Example

<Dock
  activeIndex={0}
  items={[
    { label: 'Home', icon: '🏠', onClick: () => navigate('/') },
    { label: 'Search', icon: '🔍', onClick: () => navigate('/search') },
    { label: 'Profile', icon: '👤', onClick: () => navigate('/profile') },
  ]}
/>

See the full Dock reference →