BottomNav

Mobile bottom navigation bar fixed to the bottom of the viewport.

ExamplesCodeUsageChangelog

Four-item bottom nav

Page content

HomeSearchAlertsProfile

Tailwind v4

<BottomNav>
  <BottomNavItem href="#" :active="true" label="Home">
    <template #icon>
      <!-- home SVG icon -->
    </template>
  </BottomNavItem>
  <BottomNavItem href="#" label="Search">
    <template #icon>
      <!-- search SVG icon -->
    </template>
  </BottomNavItem>
  <BottomNavItem href="#" label="Alerts">
    <template #icon>
      <!-- bell SVG icon -->
    </template>
  </BottomNavItem>
  <BottomNavItem href="#" label="Profile">
    <template #icon>
      <!-- user SVG icon -->
    </template>
  </BottomNavItem>
</BottomNav>

BottomNav Slots

Slot	Description
default	One or more BottomNavItem components

BottomNavItem Props

Prop	Type	Default	Description
label	string	—	Text label displayed below the icon
href	string	—	Renders as <a> when provided, otherwise <button>
active	boolean	false	Highlights the item with primary blue

BottomNavItem Slots

Slot	Description
icon	Icon content (SVG) displayed above the label