Aleya James
Suggested for you
Bottom Nav
A tab bar for the bottom of a phone screen.
Default
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
Four items
Five items
Keep labels to one short word. A longer label gets cut off.
Icon only
Set labelDisplay to none. Screen readers still get the label.
Variants
Default is frosted, solid is opaque, floating sits above the bottom edge, and glass is a clear capsule.
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.
Sizes
Small is 48px tall. Medium is 56px and the default.
Badge
Pass a number for a count or true for a dot.
Avatar
Put an avatar in the icon slot. The slot gets active, so the avatar can dim while another tab is selected.
Controlled
Give each item a value and bind v-model.
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
Workout app
Finance app
Video app
Crypto app
Marketplace app
Walking app
Email app
Banking app
Profile app
Coffee app
Coffee machine app
API Reference
BottomNav
BottomNavItem
Accessibility
Keyboard shortcuts and ARIA behavior.
- 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.
Social app
Aleya James
Suggested for you
Liam Parker
Lisbon, Portugal
Ava Collins
Suggested for you