This page ships a Markdown twin for AI tools.

ComponentsBottomNav

layoutstexulinot agent-emittableapp

BottomNav

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.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for BottomNav
NameKindRequiredDefaultDescription
itemsarrayyes—Destinations: href, label, optional icon and badge
labelstringno—Accessible name of the landmark
fixedbooleannofalse—
hrefTrustenum (developer, untrusted)no"developer"—
onSelecteventno—A destination was activated
classstringno——

Keyboard

Keyboard behavior for BottomNav
KeyAction
AA 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/ano 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)