Bottom navPro
Mobile tab bar with an animated indicator, badges and safe-area padding.
home screen
When to use
- Mobile apps and PWAs with 3–5 top-level sections.
When not to use
- Desktop layouts: use a sidebar.
Installation
Usage
Import it from @/components/ui/bottom-nav after installing.
example.tsx
import { BottomNav } from "@/components/ui/bottom-nav";
<BottomNav items={[{ value: "home", label: "Home", icon: <Home /> }, { value: "chat", label: "Chat", icon: <MessageCircle />, badge: 3 }]} value={tab} onValueChange={setTab} />API reference
BottomNav
A tab bar for the bottom of the screen.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | readonly { value; label; icon; badge? }[] | – | 3 to 5 items. |
| value / defaultValue / onValueChange | T | – | Current tab. |
| variant | "pill" | "line" | "pill" | Indicator style. |
Keyboard interactions
| Keys | Action |
|---|---|
| Tab | Move between items |
| EnterorSpace | Go |
Accessibility
- A labelled nav with aria-current on the current item; badges are part of the name.
Motion
- The pill or line glides between items; the active icon lifts slightly; badges pop.
Responsive behavior
- Full width with safe-area padding for phones with a home indicator.
Performance
- One animated indicator.
Notes for AI
- Fix it to the bottom with position: fixed and add bottom padding to your page.
This page as Markdown, for assistants and coding agents:
/components/bottom-nav/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt