Bottom Navigation

Fixed bottom nav for mobile-first apps.

Installation


pnpm dlx shadcn@latest add @shark/bottom-navigation

Anatomy


BottomNavigation
└── BottomNavigationList
    └── BottomNavigationItem
        ├── BottomNavigationItemIcon
        └── BottomNavigationItemLabel

Usage


import {
  BottomNavigation,
  BottomNavigationList,
  BottomNavigationItem,
  BottomNavigationItemIcon,
  BottomNavigationItemLabel,
} from "@/components/ui/bottom-navigation";


<BottomNavigation defaultValue="home">
  <BottomNavigationList>
    <BottomNavigationItem value="home">
      <BottomNavigationItemIcon>
        <HomeIcon />
      </BottomNavigationItemIcon>
      <BottomNavigationItemLabel>Home</BottomNavigationItemLabel>
    </BottomNavigationItem>
    <BottomNavigationItem value="notifications">
      <BottomNavigationItemIcon>
        <BellIcon />
      </BottomNavigationItemIcon>
      <BottomNavigationItemLabel>Notifications</BottomNavigationItemLabel>
    </BottomNavigationItem>
  </BottomNavigationList>
</BottomNavigation>

Disclaimer

Don't include position: absolute on the BottomNavigationList. It's just for the examples.

Examples

Icon only

Use aria-label on the BottomNavigationItem to give the item a label for screen readers.

With links

Use the asChild prop on BottomNavigationItem with Link.

API Reference

BottomNavigation

Root wrapper for the bottom navigation bar.

Prop	Type	Default
`value`	`string`	`-`
`defaultValue`	`string`	`-`
`onValueChange`	`(details: ValueChangeDetails) => void`	`-`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

BottomNavigationList

Fixed bar at the bottom. Typically holds nav items.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

BottomNavigationItem

Single navigation link or button.

Prop	Type	Default
`value`	`string`	required
`disabled`	`boolean`	`false`
`className`	`string`	`-`
`asChild`	`boolean`	`false`

BottomNavigationItemIcon

Holds the item icon.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

BottomNavigationItemLabel

Holds the item label text.

Prop	Type	Default
`className`	`string`	`-`
`asChild`	`boolean`	`false`

For a complete list of props, see the Ark UI documentation.

Badge

Breadcrumb

On This Page

Installation Anatomy Usage Disclaimer Examples Icon only With links API Reference BottomNavigation BottomNavigationList BottomNavigationItem BottomNavigationItemIcon BottomNavigationItemLabel