# Mobile Bottom Nav

Bottom bar of a mobile app with Home, Search, Inbox and Profile.

- id: `mobile-bottom-nav`
- Page: https://agentic-ui-kit.com/components/mobile-bottom-nav
- Live preview: https://agentic-ui-kit.com/live/component/mobile-bottom-nav

## Install

```bash
agentic-ui add mobile-bottom-nav
npx shadcn@4.17.0 add @agentic-ui/mobile-bottom-nav
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** bottom-tab-navigation, count-badge, dot-badge, badge-overflow-cap, roving-tabindex, keyboard-navigation, disabled-destination, safe-area-inset, controlled-and-uncontrolled, touch-target-floor
- **Intents:** navigate, track-status
- **Suits domains:** saas, ecommerce, social, personal-productivity, operations
- **Interaction:** tap, keyboard-navigation, roving-focus, select-destination, badge-feedback
- **Screen role:** management
- **Density:** compact
- **Dark mode:** yes
- **Use it for:** bottom bar of a mobile app with Home, Search, Inbox and Profile, count of unread conversations on the inbox icon, new-activity dot in a feed where the exact number adds nothing, destination disabled by plan or permission that stays visible but cannot be activated
- **Avoid when:** more than five destinations, where the label no longer fits and a menu or drawer is more appropriate, desktop navigation with side space, which calls for a sidebar
- **Preserve when adapting:** destination-order, badge-semantics, touch-target-floor, keyboard-model
- **Replace when adapting:** domain-copy, icon-set, destination-set, badge-nouns
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** card
- **npm dependencies:** lucide-react
- **Registry dependencies:** lib-primitives