App Content...
BottomNavigation
Navigation bar for mobile applications.
Preview
Usage
"use client";
import { BottomNavigation, BottomNavigationItem } from '@photonix/ultimate';
import { CalendarOutline, HomeOutline, SearchOutline, SettingsOutline } from '@photonix/icons';
export default function BottomNavigationBasicExample() {
return (
<BottomNavigation variant="label" elevated>
<BottomNavigationItem icon={<HomeOutline />} label="Home" active />
<BottomNavigationItem icon={<SearchOutline />} label="Search" />
<BottomNavigationItem icon={<CalendarOutline />} label="Calendar" />
<BottomNavigationItem icon={<SettingsOutline />} label="Settings" />
</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