This page ships a Markdown twin for AI tools.

ComponentsMobileHeader

layoutstexulinot agent-emittableapp

MobileHeader

mobile-header

A mobile stack header with back, title and actions. 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

Inbox header

Inbox header

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 MobileHeader
NameKindRequiredDefaultDescription
titlestringyes——
eyebrowstringno——
subtitlestringno——
titleAsenum (h1, h2, p, div)no"h1"—
backHrefstringno——
onBackeventno——
backLabelstringno——
backTargetstringno——
hrefTrustenum (developer, untrusted)no"developer"—
closeHrefstringno——
onCloseeventno——
closeLabelstringno——
stickybooleannotrue—
classstringno——

Keyboard

Keyboard behavior for MobileHeader
KeyAction
aThe title is a heading by default; Back and Close are named.

Accessibility

  • The title is a heading by default; Back and Close are named.

Evidence for mobile-header

Latest committed gates for mobile-header (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/mobile-header · 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

  • The top of a phone-sized screen that can go back

Don’t use when

Prefer another component

  • Desktop app chrome (use layout-top-nav or layout-sidebar)