Tab Bar
The tab bar of a phone screen: two to five sections at the bottom in a floating glass capsule, an optional search or prominent tab, minimizing while the content scrolls. Desktop layouts navigate with a Sidebar or Tabs, so a tab bar never renders from 768px up.
import { TabBar, TabBarItem } from "@plexui/vue/components/TabBar";A tab bar moves between the top-level sections of an app on a phone, as the iOS 26 tab bar does: a symbol over a short label for each section, in a glass capsule that floats over the bottom of the content. Keep it to five tabs, and keep it visible in every section. Put actions that change the content of a section in a Toolbar instead. A desktop layout navigates with a Sidebar or Tabs, so the bar renders under 768px only.
Examples
Each example shows the phone view.
Overview
Search tab
Prominent tab
Minimize on scroll
Background
API
TabBar
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled value of the selected tab; bind with v-model:value |
default-value | string | — | Selected tab (uncontrolled) |
search | { value: string; label?: string } | — | A search tab in a glass circle of its own at the trailing end; label defaults to Search |
prominent | { value: string; label: string } | — | A prominent tab in a glass circle of its own at the trailing end, in place of the search circle; its symbol is the prominent-icon slot, and search then joins the capsule |
minimize-behavior | "never" | "onScrollDown" | "never" | Minimize to the selected tab while the Page content scrolls down |
minimized | boolean | — | Controlled minimized state; bind with v-model:minimized |
default-minimized | boolean | false | Minimized state (uncontrolled) |
background | "soft" | "hard" | "glass" | "solid" | "soft" | How the bar meets the content scrolled under it, see Background |
aria-label | string | "Tabs" | Name of the navigation |
Slots: default, the TabBarItem elements; prominent-icon, the symbol of the prominent tab, a PlexUI icon. Events: update:value and valueChange with the value of the selected tab; update:minimized when the bar minimizes or expands.
TabBarItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Value of the tab |
label | string | — | Label under the symbol and the name of the tab |
href | string | — | Makes the tab a link |
disabled | boolean | false | The tab cannot be selected |
Slots: icon, the symbol, a PlexUI icon. Events: click when the tab is pressed, before it is selected.
The bar is a nav named Tabs. Each tab is a button, or a link with href, and the selected one has aria-current="page"; every tab is a stop for the Tab key. The search tab and the prominent tab are named by their label. Minimized, the selected tab that stays in the capsule has aria-expanded="false": pressing it brings the other tabs back. When the search or the prominent tab is the selected one, the capsule keeps its first tab, and pressing that tab selects it.
Styling
TabBar reads these component tokens. Override them at any scope to restyle it:
--tab-bar-gutter,--tab-bar-gap: space at the sides and between the capsule and the search circle (default21px,8px)--tab-bar-padding-top,--tab-bar-padding-bottom: space above and below the capsule (default12px,21pxor the safe area)--tab-bar-minimized-padding-top,--tab-bar-minimized-gutter,--tab-bar-minimized-padding-bottom: space around the minimized circles (default19px,28px,28pxor the safe area)--tab-bar-capsule-padding-block,--tab-bar-capsule-padding-inline: the capsule around the tabs (default4px,10px)--tab-bar-item-width,--tab-bar-item-height,--tab-bar-pill-outset: the widest tab, its height and how far the pill reaches past it (default94px,54px,6px)--tab-bar-icon-box,--tab-bar-icon-size: the line of the symbol and the icon (default28px,24px)--tab-bar-label-font-size,--tab-bar-label-line-height,--tab-bar-label-font-weight: the label (default10px,12px, semibold)--tab-bar-search-size,--tab-bar-minimized-size: the search or prominent circle and the minimized circles (default62px,48px)--tab-bar-item-color,--tab-bar-item-color-selected,--tab-bar-item-color-minimized: tab colors (defaultlight-dark(var(--gray-750), var(--gray-850)),var(--color-text),var(--color-text))--tab-bar-item-background-selected: the selection pill (defaultvar(--alpha-08))- The capsule and the circles use the shared mobile glass:
--mobile-glass-background,--mobile-glass-sheen,--mobile-glass-shadow-raisedand--mobile-glass-backdrop-filter.