# Bottom nav

> Mobile tab bar with an animated indicator, badges and safe-area padding.

Component · Pro · https://lodeui.com/components/bottom-nav

## When to use

- Mobile apps and PWAs with 3–5 top-level sections.

## When not to use

- Desktop layouts: use a sidebar.

## Installation

```bash
npx shadcn@latest add @lode/bottom-nav
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 |
| Enter / Space | 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.

## Related

- [Sidebar](https://lodeui.com/components/sidebar) — App sidebar that collapses to icons, with nested groups, badges and a gliding active marker.
- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Speed dial](https://lodeui.com/components/speed-dial) — A floating action button that fans out labelled actions.