Bottom navigation
Presents mobile destinations with current state and safe-area spacing.
Preview
In action
When to use
Use it for
- Three to five primary destinations in a mobile product.
Not for
- Action commands or large collections of destinations.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { BottomNavigation } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/bottom-navigation.
2. Vendor the source
npx @noorddev/vlak-cli add bottom-navigation
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/bottom-navigation.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { BottomNavigation } from "@noorddev/vlak-react";
<BottomNavigation current="interfaces" items={[{ id: "components", label: "Components", href: "/components/", icon: "grid" }, { id: "interfaces", label: "Interfaces", href: "/interfaces/", icon: "layout" }, { id: "docs", label: "Docs", href: "/docs/", icon: "file-text" }]} />Props
BottomNavigation
Mobile destinations with safe-area padding and native links. Keep to five items.
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | BottomNavigationItem[] | ||
current | string | ||
label | string | "Primary navigation" |
Also accepts HTMLAttributes<HTMLElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Enter | Tab moves through native links; Enter follows the destination. |
Accessibility
- A named navigation landmark and aria-current page indicate the active destination. Count badges are readable text.
Markup
<nav class="rs-bottom-navigation" aria-label="Primary navigation"><ul class="rs-bottom-navigation-list"><li><a class="rs-bottom-navigation-link rs-bottom-navigation-current" href="/" aria-current="page">Home</a></li><li><a class="rs-bottom-navigation-link" href="/docs/">Docs</a></li></ul></nav>
Classes
.rs-bottom-navigation.rs-bottom-navigation-list.rs-bottom-navigation-link.rs-bottom-navigation-current