Navigation Controls

Bottom Navbar

Mobile bottom navigation bar. 54px height, white background, violet top-indicator on the selected tab. Supports 2–5 items and an optional red 'NEW' badge.

V 1.0View in Storybook
Controls
Item count
5
Active item
NEW badge
Badge on item

Variants

2 itemsMinimum 2-item bottom nav
5 items with NEW badgeMax 5-item nav with a NEW badge on Option 3

Props

Name
Type
Default
items
BottomNavItem[]
—
activeIndex
number
0
onSelect
(i: number) => void
—

Code

import { BottomNavbar } from '@/src/components/Navigation/BottomNavbar'

<BottomNavbar
  items={[
    { label: 'Home',   icon: <HouseIcon />, },
    { label: 'Search', icon: <SearchIcon /> },
    { label: 'New',    icon: <BellIcon />,  isNew: true },
  ]}
  activeIndex={activeIndex}
  onSelect={setActiveIndex}
/>