BottomTabs

Mobile bottom nav bar or floating dock

The main sections of a phone-sized app, three to five of them, in reach of the thumb. On wide screens use a SidebarNav or a top bar instead; for switching views inside one page, Tabs.

Basic

home

dock variant, inline:

<script setup lang="ts">
import { ref } from "vue";
import { BlessBottomTabs, BlessMockup } from "blessing-ui";
const tab = ref("home");
const items = [
  { label: "Home", value: "home", icon: "⌂" },
  { label: "Search", value: "search", icon: "⌕" },
  { label: "Inbox", value: "inbox", icon: "✉", badge: 3 },
  { label: "Me", value: "me", icon: "◯" },
];
</script>

<template>
  <div class="row" style="align-items: flex-start; gap: 32px">
    <BlessMockup type="phone" dark style="width: 240px">
      <div style="display: flex; flex-direction: column; height: 100%">
        <div
          style="flex: 1; display: grid; place-items: center; color: var(--bless-color-text-muted)"
        >
          {{ tab }}
        </div>
        <BlessBottomTabs v-model="tab" :items inline />
      </div>
    </BlessMockup>
    <div class="col">
      <small>dock variant, inline:</small>
      <BlessBottomTabs v-model="tab" :items variant="dock" inline />
    </div>
  </div>
</template>

• bar is fixed to the bottom and pads itself for the home indicator (--bless-safe-bottom); leave the same room at the bottom of the page so nothing hides under it. dock floats as an icon strip.
• href makes a tab a link (through your router, see Install); the active one has aria-current="page".
• A badge is read with its tab ("Inbox, 3 new"); badgeLabel sets the word.

Usage

import { BlessBottomTabs } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessBottomTab[]	—
variant	"bar" | "dock"	"bar"	bar = full-width fixed bottom nav; dock = floating icon strip
inline	boolean	—	render in place instead of fixed to the viewport (docs / previews)
label	string	"Primary"
badgeLabel	string	"new"	read after a tab with a badge: a count becomes "3 new", `true` becomes "new"
modelValue	string	—

Events

Name	Payload	Description
select	[item: BlessBottomTab, e: Event]
update:modelValue	[value: string | undefined]

Slots

Name	Scope	Description
icon	{ item: BlessBottomTab; }