# BottomNav

> A mobile tab bar of destinations. Host chrome; agents never emit it. Logical CSS, so right-to-left mirrors correctly. Catalog id bottom-nav.

Language: en
Canonical: https://texuli.com/component-pages/bottom-nav/
Markdown: https://texuli.com/component-pages/bottom-nav.md (this page). Every texuli.com page has a Markdown twin at its URL plus `.md` (the home page is https://texuli.com/index.md), and any page URL answers `Accept: text/markdown` with its twin instead of HTML.
Last Updated: 2026-11-13

---

[Components](https://texuli.com/component-pages/) BottomNav

layouts texuli not agent-emittable app

`bottom-nav`

A mobile tab bar of destinations. Host chrome; agents never emit it.

**Logical CSS, so right-to-left mirrors correctly.** Layouts compose with logical CSS properties (inline-size, inset-inline-start), so right-to-left locales mirror without component changes, and full-page layouts render real landmarks (main, banner, contentinfo).

## Live examples

### Primary destinations

### Primary destinations

Loading demo…

## In your theme

This page renders in the site theme, `enterprise-neutral`. Every one of the **210** library themes re-colors every component through the `--tx-*` contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

- Violetlight mode · AA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)
- Monochromelight mode · AA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)
- Accessible Dark Contrastdark mode · AAA contrast`background`
- `surface`
- `primary`
- `accent`
- `border`

[Open Theme Studio](https://texuli.com/theme-studio/)

## Props

Public props for BottomNav

| Name | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `items` | `array` | yes | — | Destinations: href, label, optional icon and badge |
| `label` | `string` | no | — | Accessible name of the landmark |
| `fixed` | `boolean` | no | `false` | — |
| `hrefTrust` | `enum` (developer, untrusted) | no | `"developer"` | — |
| `onSelect` | `event` | no | — | A destination was activated |
| `class` | `string` | no | — | — |

## Keyboard

Keyboard behavior for BottomNav

| Key | Action |
| --- | --- |
| `A` | A labelled nav landmark; the current destination uses aria-current, not color alone. |

## Accessibility

- A labelled nav landmark; the current destination uses aria-current, not color alone.

## Evidence for bottom-nav

Latest committed gates for `bottom-nav` (as of 2026-10-23). Static snapshot — not live CI.

### Behavior

n/a no behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

### Size (gzip)

`texuli/bottom-nav · budget 12.0 KiB`

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

### Axe

documented

- `tests/e2e/site-component-pages.spec.ts`
- `docs/quality (a11y-*)`

Site component pages axe gate; package-level a11y docs under docs/quality when present.

### Browsers

- `chromium`
- `webkit`
- `mobile`

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

## When to use

### Use when

- Primary destinations on a phone-sized app shell

### Don’t use when

Prefer another component

- In-page tabs (use tabs)
- Desktop sidebar navigation (use layout-sidebar)

## Related

- [`mobile-header`](https://texuli.com/component-pages/mobile-header/)
- [`tabs`](https://texuli.com/component-pages/tabs/)

## For agents

The live preview, prop editor and copyable code run in the browser. The component manifest holds the same props, events, examples and guidance as data. The live parts run in the browser and are not in this Markdown; the operations below do the same work through the read-only MCP server at https://texuli.com/mcp (no sign-in; see https://texuli.com/auth.md).

MCP operations ([reference](https://github.com/DailybotHQ/texuli/blob/main/packages/tools/docs/ops.md#operations)):

- `component.get`: Read a component manifest with `{"id":"bottom-nav"}`.
- `example.search`: Find component examples.
- `catalog.search`: Search the component catalog.

Docs:

- [bottom-nav component doc (Markdown)](https://texuli.com/llms/components/bottom-nav.md)
- [Component docs for agents (llms.txt)](https://texuli.com/llms/llms.txt)
- [Catalog manifest snapshot (JSON)](https://texuli.com/catalog/catalog.json)
- [texuli README](https://github.com/DailybotHQ/texuli/blob/main/packages/texuli/README.md)
- [@texuli/catalog README](https://github.com/DailybotHQ/texuli/blob/main/packages/catalog/README.md)