BottomNav

BottomNav gives mobile applications a compact, persistent route chooser. Use it for a few primary destinations; use AppSidebar when the application needs grouped navigation and room for labels.

Examples

Current mobile destination

Keep the item set short and use active for the view currently shown. onSelect receives the selected item after its own callback, so surrounding content can change with the navigation.

Current view: Home

A ReactNode label

label accepts ReactNode, not just a string. Use that flexibility for concise, meaningful label content, while keeping the complete button name clear when its icon and text are read together.

Selected: Inbox

When to use

Use BottomNav for three to five top-level mobile destinations that people switch between often.

Reach for something else when:

The application has groups, utilities or many destinations — use AppSidebar.
The destinations are views within the current page — use Tabs.
The control opens a temporary list of actions — use Dropdown.

Accessibility

BottomNav renders a native <nav> containing links for destinations and buttons for actions. Each item's visible label is part of its accessible name; provide an icon and label that describe the same destination.
active adds aria-current="page" to the current item. Keep that state synchronized with the view your application shows.
An item's onClick runs before the navigation-level onSelect(id, item). Use either callback to update view state. href links navigate natively; asChild links use the router.
The component does not add an accessible name to the navigation landmark. Pass aria-label when there is more than one navigation landmark on the page.

Router links

tsx

// React Router
<BottomNav items={[{ id: 'home', icon: homeIcon, label: 'Home', active: true,
  asChild: <Link to="/home" /> }]} />

// Next.js
<BottomNav items={[{ id: 'account', icon: accountIcon, label: 'Account',
  asChild: <Link href="/account" /> }]} />

Use href for native links. target: '_blank' and rel: 'noopener noreferrer' keep the browser's open-in-new-tab behavior. Items with only onClick remain buttons.

API and code

Name	Type	Required	Description
`items`	`BottomNavItem[]`	Required	Navigation items, typically three to five destinations.
`onSelect`	`(id: string, item: BottomNavItem) => void`	—	Called after an item-level callback with the selected item.

Use anchors for destinations and mark the current page:

html

<nav class="lyra-bottomnav" aria-label="Primary navigation">
  <a class="lyra-bottomnav__item lyra-bottomnav__item--active" href="/home" aria-current="page">
    <span class="lyra-bottomnav__icon" aria-hidden="true">⌂</span>
    <span class="lyra-bottomnav__label">Home</span>
  </a>
  <a class="lyra-bottomnav__item" href="/activity">
    <span class="lyra-bottomnav__icon" aria-hidden="true">◔</span>
    <span class="lyra-bottomnav__label">Activity</span>
  </a>
</nav>

<lyra:bottom-nav> Generated from lyra-ds/blade v0.10.0.

Prop	Default	Required	Example values
`items`	—	Required	—

blade

<lyra:bottom-nav :items="[
    ['label' => 'Home', 'icon' => '🏠', 'active' => true],
    ['label' => 'Search', 'icon' => '🔍'],
    ['label' => 'Profile', 'icon' => '👤'],
]" />