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

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
items*	BottomNavItem[]	—
onSelect	(href: string) => void	—
ariaLabel	string	—

* required