Tab Bar

The bottom bar for phone layouts: classic edge-to-edge with a rule over the active tab, or a floating bar with a sliding highlight and an optional search pane beside it that opens a command palette.

import { TabBar, TabBarItem, TabBarSpacer } from "pleate/tab-bar";

Floating with search

Four places in the bar, search in its own pane at the trailing end. Copy this for an app shell.

Home

Weekend in Lisbon

14 to 17 Nov · 4 travellers

Classic and floating

Home

Time Out Market
Miradouro da Graça
LX Factory

Home

Time Out Market
Miradouro da Graça
LX Factory

Props

value / onValueChange

Value-driven tabs (or use active on link items).

string

variant

Look.

"classic" | "floating"default "classic"

hideFrom

Hide on wider screens.

"never" | "md" | "lg"default "never"

position

Pinned to the viewport bottom.

"fixed" | "static"default "fixed"

trailing

A separate pane beside a floating bar, usually a search IconButton.

ReactNode

TabBarSpacer

Keeps page content clear of a fixed bar; match the bar's variant.

variant, hideFrom

TabBarItem

One tab.

icon, activeIcon, label, badge, value, active, asChild

Accessibility

Rendered as a nav landmark; the current tab has aria-current="page".
Respects the home-indicator safe area.