build69
build69  /  Components  /  Navigation  /  BottomNavigation

BottomNavigation

v1.0.6Updated 19 Oct 2026

Mobile-first bottom tab bar with fixed or inline placement, badges, and labels-when-active mode. Pair with mobile pages or sticky surfaces.

View source← Back to catalog

Preview

Live · 10 stories
Four TabsOpen ↗
▸Why this is recommendedbottom-navtabsmobilenavigation+3

BottomNavigation organised into tabs — four.

Recommended for+14
  • ✓Mobile-first surfaces
  • ✓Compact app shells
  • ✓Companion app navigation
Tags+6
bottom-navtabsmobilenavigationmuistickyfour
Features+4
  • Fixed bottom or inline placement
  • Badge per tab
  • Labels-always / labels-when-active modes
  • Icon-only mode
  • 3-5 tabs supported
  • i18n: labels prop overrides the nav aria-label, badge-overflow text and the accessible-label templates ({label}/{count} tokens); merged over DEFAULT_BOTTOM_NAVIGATION_LABELS
  • Client-side routing: pass `linkComponent` (next/link, React Router Link) and every row that has an href renders through the host app link component instead of a plain anchor, which would reload the whole document (fb_bf7dc63a)
Not recommended for−2
  • ✕Desktop dashboards (use Sidebar)
  • ✕Long nav menus (use Sidebar with sections)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "BottomNavigation" })

Usage

import { BottomNavigation } from '@/components/navigation/bottom-navigation';

<BottomNavigation tabs={tabs} value={tab} onValueChange={setTab} fixed showLabels="active" />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
tabs

Tab list

BottomNavTab[]yes
value

Active tab

string—
onValueChange

Tab change callback

function—
showLabels

Label visibility

'always' | 'active' | 'never'—
fixed

Fixed bottom positioning

boolean—
labels

Override any built-in UI string (i18n): nav aria-label, badge overflow (99+), and the accessible-label templates {label} (has updates) / {label} ({count} new). Merged over DEFAULT_BOTTOM_NAVIGATION_LABELS

Partial<BottomNavigationLabels>—
linkComponent

The host app link component for every tab that has an href. A disabled tab still emits no href and stays a plain anchor. BottomNavItem.onClick receives the click EVENT. Tabs carry data-slot="bottom-navigation-item". MCP feedback fb_bf7dc63a.

BottomNavLinkComponent—

Related

Platform docsAll componentsSource files