Top Header Mobile
Mobile-first top app bar with leading/trailing action slots, centered or start-aligned title, five variants, five sizes, six rounded options, three layout modes (small/medium/large), collapsible state, and full RTL support.
Playground
Installation
pnpm add @tessinaui/uiUsage
import { TopHeaderMobile } from "@tessinaui/ui";<TopHeaderMobile
variant="filled"
title="Page Title"
leadingAction={
<button aria-label="Back">
<ArrowLeft className="size-5" />
</button>
}
trailingActions={
<button aria-label="Search">
<Search className="size-5" />
</button>
}
/>Showcase
API Reference
TopHeaderMobile props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "filled" | "elevated" | "transparent" | "primary" | "on-color" | "filled" | Visual style of the header |
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Height and padding scale |
rounded | "none" | "sm" | "md" | "lg" | "xl" | "full" | "none" | Bottom corner rounding |
title | ReactNode | — | Title text or custom element |
titleAlign | "start" | "center" | "center" | Title alignment within the header |
leadingAction | ReactNode | — | Leading slot (typically an icon button for back/menu) |
trailingActions | ReactNode | — | Trailing slot (one or more icon buttons) |
layout | "small" | "medium" | "large" | "small" | Layout mode — small is single row, medium/large show title below actions |
collapsed | boolean | false | Collapses medium/large layout to inline title (scroll behavior) |
sticky | boolean | false | Applies sticky positioning at top |
dir | "ltr" | "rtl" | — | Text and layout direction |
Variants
Filled (default)
Solid surface background. The standard app bar for most screens.
Elevated
Same as filled but with a drop shadow for visual elevation.
Transparent
No background — useful for hero/media screens where content shows behind the header.
Primary
Brand-coloured background with on-primary text. Use for branded screens.
On Color
Dark foreground background with light text. Matches the Figma reference design.
Layout Modes
Small (default)
Single row with leading action, inline title, and trailing actions. Equivalent to M3 center-aligned / small top app bar.
Medium
Title appears below the action row at medium size. When collapsed, the title moves inline.
Large
Title appears below the action row at large/prominent size. When collapsed, the title moves inline. Equivalent to M3 large top app bar.
Keyboard Navigation
| Key | Action |
|---|---|
Tab | Move focus between interactive elements (icon buttons) |
Enter / Space | Activate focused button |
Accessibility
- Uses
<header>element withrole="banner"for landmark navigation - All icon buttons in slots should have
aria-labelattributes - Title rendered as
<h1>when passed as a string - Supports
dir="rtl"for right-to-left layouts — leading/trailing slots swap visually - Focus ring visible on keyboard navigation (
focus-visible:ring-2)
Action Sheet
A mobile-first bottom sheet presenting a set of contextual actions. Built on Base UI Dialog. Compound component pattern with Header, Group, Item, Separator, and Cancel. Three sizes. Five corner-rounding options. Destructive intent, loading state, icon slots. LTR and RTL support.
Top Header Desktop
Desktop navigation bar with brand, nav, search, and actions slots. Six variants, five sizes, six rounded options, three nav-position modes (start/center/end), max-width containment, bordered, sticky, skeleton, and full RTL support.