Bottom Navigation
npx @intellihelper/cli@latest add bottom-navigationMobile tabs
Bottom nav with badges and static demo shell.
About this component
Bottom Navigation is part of Navigation. Mobile tab bar with badges, safe-area, and glass chrome.
Install with npx @intellihelper/cli@latest add bottom-navigation. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Bottom Navigation
Use when
- Use Bottom Navigation when mobile tab bar with badges, safe-area, and glass chrome.
- App chrome: sidebars, menus, pagination, scroll helpers.
- Orienting users inside multi-section product UIs.
Avoid when
- In-page CTAs that should be buttons rather than nav items.
- Single-page marketing sections better served by anchor links.
Accessibility notes
- Mark current page with aria-current where applicable.
- Sidebars and menus should be keyboard navigable and announce expansion state.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Pair sidebar with main content landmarks (nav + main).
- Use pagination for large lists; avoid infinite scroll without an accessible alternative.
FAQ
Related components
View all navigation →Sidebar
Collapsible glass sidebar with mobile sheet and icon rail.
Open →Navigation Menu
Multi-level header navigation with glass content panels.
Open →Breadcrumb
Hierarchical path navigation with separators and ellipsis.
Open →Link
Styled anchors with variants, sizes, external safety defaults, and asChild for Next.js.
Open →