Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProBottom navigation for three to five destinations in four looks (iOS, Material, pill, glass) with badges, safe-area padding and aria-current.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for the three to five top-level places of a phone app or a mobile web app, always visible at the bottom.
Do not use it for more than five items (use a Swipe Drawer) or for steps of a flow. On desktop widths, switch to a sidebar.
import { TabBar } from "@/components/ui/tab-bar"<TabBar
variant="ios"
position="fixed"
value={tab}
onValueChange={setTab}
items={[
{ id: "home", label: "Home", icon: <HomeIcon /> },
{ id: "inbox", label: "Inbox", icon: <InboxIcon />, badge: 3 },
]}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
TabBar | items | TabBarItem[] | required | { id, label, icon, activeIcon?, badge?, dot?, href? }. |
TabBar | value / onValueChange | string / (id) => void | required | The selected id. |
TabBar | variant | "ios" | "material" | "pill" | "glass" | "ios" | The look. |
TabBar | label | string | "Main" | Accessible name of the navigation. |
TabBar | position | "fixed" | "static" | "static" | Pin to the bottom of the screen. |
The component ships with a Testing Library test (tab-bar.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.