BottomNav
Touch-friendly destinations that fit the phone's safe area.
Live — this one is real
Usage
import { BottomNav } from "mizu-ui";
export function Example() {
return (
<BottomNav
currentPath="/components"
items={[
{ label: "Collection", href: "/components" },
{ label: "Lab", href: "/lab" },
{ label: "Studio", href: "/studio" },
]}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect navigation/Navigation.tsx
Source is included in the npm package under src/navigation/Navigation.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | NavigationItem[] | — | Visible label, href and optional icon. |
| currentPath | string | — | Current destination. |
| label | string | — | Navigation landmark. |
Accessibility
Native links with generous targets and visible names. Safe-area padding is built in; positioning belongs to your layout.
Motion
CSS transitions explain state changes. Reduced motion removes travel.