shadcn.io is not affiliated with official shadcn/ui

Shadcn Bottom Navigation for React Radix UI

Fixed bottom nav for mobile-first apps.

Radix UI does not include this primitive, so this page uses the Ark UI component. The visuals match the Ark UI version.

PreviewCode

Home

Installation

bunx --bun shadcn@latest add https://kit.dev/r/radix/bottom-navigation.json

Anatomy

BottomNavigation
├── BottomNavigationList
├── BottomNavigationItem
├── BottomNavigationContent
└── BottomNavigationIndicator

Usage

import { BellIcon, HomeIcon, SearchIcon, UserIcon } from "lucide-react";
import {
  BottomNavigation,
  BottomNavigationContent,
  BottomNavigationItem,
  BottomNavigationItemIcon,
  BottomNavigationItemLabel,
  BottomNavigationList,
} from "@/components/ui/bottom-navigation";

const items = [
  { icon: HomeIcon, label: "Home", value: "home" },
  { icon: SearchIcon, label: "Search", value: "search" },
  { icon: BellIcon, label: "News", value: "news" },
  { icon: UserIcon, label: "Profile", value: "profile" },
];

const Example = () => (
  <div className="relative flex h-80 w-full max-w-xs flex-col overflow-hidden rounded-xl border bg-background shadow-lg/5">
    <BottomNavigation
      className="flex h-full min-h-0 flex-col"
      defaultValue="home"
    >
      {items.map((item) => (
        <BottomNavigationContent
          className="flex min-h-0 flex-1 items-center justify-center bg-muted"
          key={item.value}
          value={item.value}
        >
          <span className="text-muted-foreground text-sm">{item.label}</span>
        </BottomNavigationContent>
      ))}
      <BottomNavigationList className="static bg-background">
        {items.map((item) => (
          <BottomNavigationItem key={item.value} value={item.value}>
            <BottomNavigationItemIcon>
              <item.icon />
            </BottomNavigationItemIcon>
            <BottomNavigationItemLabel>{item.label}</BottomNavigationItemLabel>
          </BottomNavigationItem>
        ))}
      </BottomNavigationList>
    </BottomNavigation>
  </div>
);

Accessibility

Key	Description
`ArrowDown`	Move to the next item when `orientation` is `"vertical"`.
`ArrowUp`	Move to the previous item when `orientation` is `"vertical"`.
`ArrowLeft`	Move to the previous item when `orientation` is `"horizontal"`.
`ArrowRight`	Move to the next item when `orientation` is `"horizontal"`.
`Home`	Go to the start.
`End`	Go to the end.
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Controlled

PreviewCode

Disabled

PreviewCode

Icon Only

PreviewCode

Root Provider

PreviewCode

With Badge

PreviewCode

With Links

PreviewCode

API Reference

BottomNavigation

div

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

hideMode?"display-none" | "activity"

ids?object

lazyMount?boolean

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

unmountOnExit?boolean

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation"

data-scope"tabs"

data-part"root"

data-focus?string

data-orientationstring

CSS variableType

--spacingstring

BottomNavigationList

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

ids?object

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation-list"

data-scope"tabs"

data-part"list"

aria-labelstring

aria-orientationstring

data-focus?string

data-orientationstring

role"tablist"

BottomNavigationItem

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

ids?object

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation-item"

data-scope"tabs"

data-part"trigger"

aria-controlsstring

aria-disabledstring

aria-selectedstring

data-disabled?string

data-focus?string

data-orientationstring

data-ownedbystring

data-selected?string

data-ssr?string

data-valuestring

role"tab"

type"button"

BottomNavigationContent

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

ids?object

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation-content"

data-scope"tabs"

data-part"content"

aria-labelledbystring

data-orientationstring

data-ownedbystring

data-selected?string

role"tabpanel"

BottomNavigationItemIcon

span

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

ids?object

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation-item-icon"

data-scope"tabs"

data-part"root"

data-focus?string

data-orientationstring

BottomNavigationItemLabel

span

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

ids?object

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation-item-label"

data-scope"tabs"

data-part"root"

data-focus?string

data-orientationstring

BottomNavigationRootProvider

div

PropType

value?string | null

defaultValue?string | null

onValueChange?(details: ValueChangeDetails) → void

idstring

activationMode?"manual" | "automatic"

composite?boolean

deselectable?boolean

dir?"ltr" | "rtl"

hideMode?"display-none" | "activity"

ids?object

lazyMount?boolean

loopFocus?boolean

navigate?((details: NavigateDetails) → void) | null

onFocusChange?(details: FocusChangeDetails) → void

orientation?"horizontal" | "vertical"

translations?object

unmountOnExit?boolean

asChild?boolean

className?string

AttributeType

data-slot"bottom-navigation"

data-scope"tabs"

data-part"root"

data-focus?string

data-orientationstring

CSS variableType

--spacingstring

Shadcn Bottom Navigation for React Radix UI

Installation

Anatomy

Usage

Accessibility

Demos

Controlled

Disabled

Icon Only

Root Provider

With Badge

With Links

API Reference

BottomNavigation

BottomNavigationList

BottomNavigationItem

BottomNavigationContent

BottomNavigationItemIcon

BottomNavigationItemLabel

BottomNavigationRootProvider

useBottomNavigation

BottomNavigationContext