Bottom Nav

A tab bar for the bottom of a phone screen.

Default

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Usage

vue

<script setup lang="ts">
import { BottomNav, BottomNavItem } from "@/components/ui/bottom-nav";
import { ref } from "vue";

const current = ref("home");
</script>

<template>
  <BottomNav v-model="current">
    <BottomNavItem value="home" label="Home" icon="solar:home-linear" active-icon="solar:home-bold" />
    <BottomNavItem value="explore" label="Explore" icon="solar:compass-linear" active-icon="solar:compass-bold" />
    <BottomNavItem value="profile" label="Profile" icon="solar:user-circle-linear" active-icon="solar:user-circle-bold" />
  </BottomNav>
</template>

Three items

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Four items

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Five items

Keep labels to one short word. A longer label gets cut off.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Icon only

Set labelDisplay to none. Screen readers still get the label.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Variants

Default is frosted, solid is opaque, floating sits above the bottom edge, and glass is a clear capsule.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Floating

Glass

A clear capsule over the content, with a solid pill behind the active item. Use it with indicator set to pill.

Glass with labels

With labels under the icons, the pill covers the icon and its label.

Glass with active label

Set labelPlacement to beside and labelDisplay to active. The pill grows to fit the label.

Glass with an action

Keep the action button outside BottomNav, next to the bar.

Dark mode

Every preview has a light and dark switch next to the replay button. This one opens in dark.

Indicators

Pill and bar slide to the item you tap.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Sizes

Small is 48px tall. Medium is 56px and the default.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Badge

Pass a number for a count or true for a dot.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Avatar

Put an avatar in the icon slot. The slot gets active, so the avatar can dim while another tab is selected.

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Controlled

Give each item a value and bind v-model.

Home

v-model is "home"

Hide on scroll

Set hideOnScroll to hide the bar when you scroll down. It comes back when you scroll up.

Scroll to top

Tap the active item to scroll back to the top. A fixed bar scrolls the page. In a container, set scrollTarget.

Positioning

The bar is fixed by default and hides from lg up. Use absolute inside a container, or static to keep it in the page flow.

The bar adds the bottom safe area under its 56px. Set --safe-area-inset-bottom on a parent to use your own value.

vue

<!-- Pinned to the viewport on phones, hidden from lg up -->
<BottomNav v-model="current">...</BottomNav>

<!-- Inside a container that sets its own safe area -->
<div class="relative h-dvh overflow-hidden [--safe-area-inset-bottom:1.25rem]">
  <BottomNav v-model="current" position="absolute">...</BottomNav>
</div>

App examples

Bars from app designs, built with BottomNav and Tailwind classes. Icons are Solar by 480 Design, licensed under CC BY 4.0.

Meditation app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Workout app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Finance app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Video app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Crypto app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Marketplace app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Walking app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Email app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Banking app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Profile app

Coffee app

Your story

Liam Parker

Ava Collins

Noah Reed

Sophia Bennett

Aleya James

Suggested for you

Liam Parker

Lisbon, Portugal

Ava Collins

Suggested for you

Coffee machine app

API Reference

BottomNav

Prop	Type	Default	Description
`modelValue`	`string \| number`	-	Value of the active item. Use with v-model.
`variant`	`"default" \| "solid" \| "floating" \| "glass"`	`"default"`	Surface style. glass is a clear floating capsule, made for indicator pill.
`indicator`	`"none" \| "pill" \| "bar" \| "dot"`	`"none"`	Marks the active item. Pill and bar slide between items.
`size`	`"sm" \| "md"`	`"md"`	Bar height: 48px or 56px.
`labelDisplay`	`"always" \| "active" \| "none"`	`"always"`	Which labels to show.
`labelPlacement`	`"below" \| "beside"`	`"below"`	Label under or next to the icon. With beside, items grow to fit their label.
`position`	`"fixed" \| "absolute" \| "static"`	`"fixed"`	fixed hides the bar from lg up.
`hideOnScroll`	`boolean`	`false`	Hides the bar on scroll down and shows it on scroll up.
`scrollTarget`	`HTMLElement \| string \| null`	`null`	Element or selector for hideOnScroll and scroll to top. Without it, hideOnScroll watches the window and only a fixed bar scrolls to the top.
`ariaLabel`	`string`	`"Bottom navigation"`	Name of the nav landmark.
`class`	`string`	-	Extra classes, merged with cn().

Event	Description
`update:modelValue`	Fires when you tap an item that has a value.

Slot	Description
`default`	BottomNavItem children.

BottomNavItem

Prop	Type	Default	Description
`to`	`string`	-	Renders a NuxtLink. External URLs open in a new tab.
`icon`	`string`	-	Iconify icon name.
`activeIcon`	`string`	-	Icon for the active state, usually the filled version. The item then keeps one color in every state.
`label`	`string`	-	Item label.
`badge`	`number \| boolean`	-	A number shows a count, capped at 99+. true shows a dot.
`exact`	`boolean`	`false`	Match the route exactly instead of by prefix.
`active`	`boolean`	`false`	Forces the active state.
`value`	`string \| number`	-	Matches the modelValue of the parent BottomNav.
`as`	`string`	`"button"`	Element to render when to is not set.
`class`	`string`	-	Extra classes, merged with cn().

Event	Description
`select`	Fires on click.

Slot	Description
`icon`	Custom icon content, such as an avatar. Gets { active }.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Tab`	Moves focus between items.
`Enter`	Opens the focused item.
`Space`	Opens the focused item.

Renders a nav landmark named by ariaLabel.
The active item has aria-current=page.
Icon-only items use their label as aria-label.
A count badge is read with the label, for example Inbox, 3.
Motion turns off when the user prefers reduced motion.

Border Beam Breadcrumb

Bottom Nav

Default

Usage

Three items

Four items

Five items

Icon only

Variants

Floating

Glass

Glass with labels

Glass with active label

Glass with an action

Dark mode

Indicators

Sizes

Badge

Avatar

Controlled

Hide on scroll

Scroll to top

Positioning

App examples

Meditation app

Workout app

Finance app

Video app

Crypto app

Marketplace app

Walking app

Email app

Banking app

Social app

Profile app

Coffee app

Coffee machine app

API Reference

BottomNav

BottomNavItem

Accessibility