Bottom Navigation

Fixed bottom nav for mobile-first apps.

Installation


pnpm dlx shadcn@latest add https://shark.vini.one/r/bottom-navigation.json

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

Show only icons without labels for a minimalist layout.

With links

Use the asChild prop on <BottomNavigationItem /> with <Link />.

Sync the active state with value={pathname} on the <BottomNavigation />.

Accessibility

Use aria-label on <BottomNavigationItem /> when using icon-only items so screen readers can read the label.

API Reference

BottomNavigation

Root wrapper for the bottom navigation bar.

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

BottomNavigationList

Fixed bar at the bottom. Typically holds nav items.

Prop	Type	Default
`aria-label`	`string`	`"Main navigation"`
`className`	`string`	`-`

BottomNavigationItem

Single navigation link or button.

Prop	Type	Default
`value`	`string`	required
`disabled`	`boolean`	`false`
`aria-label`	`string`	`-`
`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.

On This Page

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