TabBar
The app's nav on a phone: a bar of tabs under the composer, in reach of the thumb, each its icon over its name, the current page on the ink wash the NavRail's has, gliding as it changes.
The app's pages
import { TabBar } from "@/components/shared/tab-bar";
<TabBar
label={t("label")}
items={NAV_PAGES.map((page) => ({
key: page.key,
label: t(page.key),
icon: page.icon,
active: page.key === current,
render: <Link href={`/${locale}${page.path}`} />,
}))}
/>Fewer pages
<TabBar label="Pages" items={items.slice(0, 3)} />In the app
The AppShell sets it under the composer below lg (its tabBar): a tap on a page slides to the app, Chat | App stays at the top to come back, and while the composer has focus the bar steps away, so it never sits on the keyboard. Side by side the NavRail is the nav.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The nav's accessible name: “Pages”. |
| items | { key, label, icon, active?, render }[] | — | Each page, as the NavRail takes them: its name (shown under the icon), its icon, whether it's current, and the element it is — a Link. |
Guidelines
- The same pages as the NavRail, in the same order: one nav, two shapes.
- Up to five tabs; each shares the width evenly and is 56px tall for the thumb.
- Names in words under every icon: a phone has no hover to name them.