BottomNavigation

Mobile-style tab bar with icons + labels and optional badges. Use fixed for a true bottom-of-viewport bar with safe-area inset support.

Active tab: home

Usage

import { BottomNavigation, BottomNavigationItem } from '@bwo-ui/react';

const [tab, setTab] = useState('home');

<BottomNavigation value={tab} onValueChange={setTab}>
  <BottomNavigationItem value="home"    icon={<HomeIcon />}   label="Home" />
  <BottomNavigationItem value="search"  icon={<SearchIcon />} label="Search" />
  <BottomNavigationItem value="alerts"  icon={<BellIcon />}   label="Alerts" badge={3} />
  <BottomNavigationItem value="profile" icon={<UserIcon />}   label="Profile" />
</BottomNavigation>

Props — BottomNavigation

Prop	Type	Default	Description
`value`	`string \| null`	—	Active item value.
`onValueChange`	`(value: string) => void`	—	Selection handler.
`variant`	`'labeled' \| 'icons-only' \| 'selected-label'`	`'labeled'`	How to render labels.
`fixed`	`boolean`	—	Pin to the bottom of the viewport with safe-area padding.

Props — BottomNavigationItem

Prop	Type	Default	Description
`value`	`string`	—	Unique id matching the parent value.
`icon`	`ReactNode`	—	Icon element rendered above the label.
`label`	`ReactNode`	—	Label text.
`badge`	`ReactNode`	—	Notification badge content.