Screen Content #1
BottomNavigation
Navigation bar for mobile applications.
Preview
Usage
import { BottomNavigation, BottomNavigationItem } from '@photonix/ultimate';
import { CoreOutline, SearchOutline } from '@photonix/icons';
<BottomNavigation>
<BottomNavigationItem
icon={<CoreOutline />}
label="Home"
active={currentTab === 0}
onClick={() => setCurrentTab(0)}
/>
<BottomNavigationItem
icon={<SearchOutline />}
label="Search"
active={currentTab === 1}
onClick={() => setCurrentTab(1)}
/>
</BottomNavigation>Component API
BottomNavigation
Prop | Type | Default | Description |
|---|---|---|---|
variant | "label" | "indicator" | 'label' | Variant of the navigation bar |
elevated | boolean | - | Control elevated state explicitly |
autoElevate | boolean | false | Auto-toggle elevation based on whether content still exists below the bar |
children | React.ReactNode | - |
BottomNavigationItem
Prop | Type | Default | Description |
|---|---|---|---|
icon | React.ReactNode | - | Icon element |
label | string | - | Label text |
active | boolean | - | Whether the item is active |
variant | "label" | "indicator" | 'label' | Variant derived from parent |
On this page
Preview
Component API