UI ComponentsLayout
Bottom Navigation
Compact icon-and-label navigation for primary destinations.
Import
import { BottomNavigation, BottomNavigationItem } from "@puzzle-ui/ui";Items
Use direct BottomNavigationItem children. Provide href for destinations or onClick for actions; active destinations receive aria-current="page".
API
BottomNavigation
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | Required | Direct navigation items. |
ariaLabel | string | "Bottom navigation" | Navigation landmark name. |
className, style | string, CSSProperties | - | Root styling. |
BottomNavigationItem
| Prop | Type | Default | Description |
|---|---|---|---|
icon | ReactNode | Required | Decorative item icon. |
label | string | Required | Visible accessible name. |
href | string | - | Link destination. |
onClick | MouseEventHandler<HTMLButtonElement> | - | Action callback when no href is supplied. |
active | boolean | false | Current visual state. |
className, style | string, CSSProperties | - | Item styling. |
The component does not choose routes or track active state. Set active from the application route. Inactive items use the muted text color; only items with active use the primary color.