Photonix

BottomNavigation

Navigation bar for mobile applications.

Preview

Screen Content #1

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
Photonix UI - React Components, Templates & Figma Design System