Bottom Nav

Fixed full-width mobile navigation bar for primary viewport routing with active indicators and notification badges.

// Plain markup
import { BottomNav } from "@shavin/ui";

Live Preview

Mobile Screen Preview

Active tab: /home

Component Source

import { BottomNav } from "@shavin/ui";

const items = [
  { href: "/home", label: "Home", icon: <HomeIcon />, active: true },
  { href: "/search", label: "Search", icon: <SearchIcon /> },
  { href: "/inbox", label: "Inbox", icon: <InboxIcon />, badge: 3 },
  { href: "/profile", label: "Profile", icon: <UserIcon /> },
];

<BottomNav items={items} onSelect={(href) => setActive(href)} />

Usage & Guidelines

Use BottomNav for mobile view navigation (3 to 5 primary destinations). Unlike ActionBar (which floats and triggers popovers or contextual canvas actions), BottomNav spans the full width of the mobile viewport, stays fixed at the bottom edge, and provides immediate page routing.

Prop	Type	Default	Description
items*	BottomNavItem[]	—	List of 3 to 5 mobile tab destinations ({ href, label, icon, active, badge }).
onSelect	(href: string) => void	—	Callback fired when a mobile tab destination is clicked.
ariaLabel	string	Bottom	Accessible navigation ARIA label. Default 'Bottom navigation'.

* required