Bottom Navigation - Shark UI

Sections

Components

Utilities

Forms

Hooks

useIsMobile

Copy Markdown

Fixed bottom nav for mobile-first apps.

Docs API

PreviewCode

HomeSearchNewsProfile

Installation#

CLIManual

pnpmbunnpmyarn

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.

PreviewCode

With links#

Use the asChild prop on BottomNavigationItem with Link.

PreviewCode

Home Search News Profile

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 ](/docs/components/badge)[

Breadcrumb ](/docs/components/breadcrumb)

On This Page

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