Bottom Nav
Mobile bottom navigation bar with a sliding active indicator. Three surfaces, four indicator styles, optional center action, badges, and hide-on-scroll.
Default
A bordered bar of equal-width items with the active item highlighted by a sliding pill.
Controlled (v-model)
Give each item a value and bind v-model to track the active one without routing. The indicator follows the selection. Clicking an item also emits select.
Variants
default is a bordered solid bar, floating is a detached rounded card with a shadow, glass is a translucent bar with a backdrop blur.
default
floating
glass
Indicators
pill slides a filled box behind the active item, bar draws a line on the top edge, dot places a marker under the icon, none removes it.
Sizes
sm, md, and lg scale the icon, label, item padding, and bar height together.
size="sm"
size="md"
size="lg"
Label display
always keeps every label visible, active reveals the label only on the current item, none hides labels for an icon-only bar.
always
active
none
With badge
Pass a number for a count pill (capped at 99+) or true for a small dot overlay on the icon.
Active icon
Set activeIcon to crossfade to a filled variant when the item is active.
Center action
Drop a BottomNavAction between the items to get a raised center FAB for the primary action.
Hide on scroll
hideOnScroll slides the bar away on scroll down and brings it back on scroll up. scrollTarget points it at a custom scroll container, used here to drive the demo inside a static frame.
Scroll down to tuck the bar away, scroll up to reveal it again.
API Reference
Props, events, and slots for each sub-component.
BottomNav
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | number | — | Active item value for v-model. Items with a matching value prop render active. Use for non-routed (button) navs. |
| variant | "default" | "floating" | "glass" | "default" | Visual surface. floating is a detached rounded card, glass is translucent with a backdrop blur. |
| indicator | "pill" | "bar" | "dot" | "none" | "pill" | Active-item indicator style. pill and bar slide via measurement, dot is rendered per item. |
| size | "sm" | "md" | "lg" | "md" | Scales icon size, label text, item padding, bar height, and nav min-height. |
| labelDisplay | "always" | "active" | "none" | "always" | always shows every label, active reveals it only on the current item, none hides labels. |
| position | "fixed" | "static" | "fixed" | fixed pins the bar to the bottom (mobile only, lg:hidden). static renders it in flow for demos. |
| hideOnScroll | boolean | false | Slides the bar out on scroll down and back in on scroll up, driven by the resolved scroll source (see scrollTarget). |
| scrollTarget | HTMLElement | string | null | null | Scroll source for hideOnScroll. Element or CSS selector. Defaults to the window when null. |
| ariaLabel | string | "Bottom navigation" | Accessible name for the nav landmark. Set a distinct label when a page has more than one nav. |
| class | string | — | Extra classes, merged with cn(). |
Events
| Event | Description |
|---|---|
| update:modelValue | Fired when an item with a value is clicked. Enables v-model. |
Slots
| Slot | Description |
|---|---|
| default | BottomNavItem and BottomNavAction children. |
BottomNavItem
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| to | string | — | Renders as NuxtLink when set. External URLs (http) open in a new tab. Omit it for a button. |
| icon | string | — | Required hugeicons name for the default (inactive) icon. |
| activeIcon | string | — | Hugeicons name shown when active. The two icons crossfade on state change. |
| label | string | — | Text label under the icon. Hidden when labelDisplay is none. |
| badge | number | boolean | — | Overlay badge. A number above 0 shows a count pill (99+ cap), true shows a small dot. |
| exact | boolean | false | Route matching mode. exact matches the path exactly, otherwise it matches by prefix. A to of / is always matched exactly. |
| active | boolean | false | Forces the item active when true (overrides value and route detection). Use for button-mode demos and static layouts. |
| value | string | number | — | Identifies the item for v-model. Active when it equals the parent BottomNav modelValue. Click also emits select. |
| as | string | "button" | Element to render when to is empty. |
| class | string | — | Extra classes, merged with cn(). |
Events
| Event | Description |
|---|---|
| select | Fired on click in both link and button modes. |
BottomNavAction
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| to | string | — | Renders as NuxtLink when set. External URLs (http) open in a new tab. Omit it for a button. |
| icon | string | "hugeicons:add-01" | Hugeicons name for the center FAB icon. |
| label | string | — | Caption under the FAB. Also used as the aria-label on the control. |
| as | string | "button" | Element to render when to is empty. |
| class | string | — | Extra classes, merged with cn(). |
Events
| Event | Description |
|---|---|
| select | Fired on click in both link and button modes. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Tab | Moves focus between the navigation items. |
| Enter | Activates the focused item or center action. |
| Space | Activates the focused item or center action. |
- Rendered as a <nav> landmark with role navigation and an ariaLabel name.
- The active item carries aria-current=page.
- Icon-only items (and the center action) fall back to their label as an aria-label so they are never unnamed.
- Count badges are announced as part of the item name (for example, Messages, 3).