Photonix

BottomNavigation

Navigation bar for mobile applications.

Preview

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