Molecules
Navigation
The bars on top of a page. AppHeader is the bar of app pages: a PageHeader at the start, a search in the center, controls at the end, and tabs under it. PublicHeader is the bar of public pages with the logo.
Playground
Figma variant
App Header
Type=Default
Tab=False
_Left Elements
🎛 Type=Default
Show Back Button=true
Show Breadcrumb=false
Show Info=true
Show Subtitle=false
Show Actions=true
_Right Elements
🎛 Type=Full ControlParts
- PageHeader (_Left Elements): back button, breadcrumb, the page title with info and subtext, icon actions and a chip. Large Title adds a line above a bigger title; Inline Edit turns the title into an input with save and cancel.
- AppHeader (App Header): three equal columns (start, center, end) and an optional bottom row for Tabs. The end holds buttons, a Switch, a Selectbox or a Segment (_Right Elements).
- PublicHeader (Public Page Navigation): the 64px bar of public pages: logo only, logo and title, or title, centered logo and a login button or avatar.
Tokens
| Part | Token |
|---|---|
| PageHeader padding / gap | --layout-tiny --space-container / --space-form-gutter |
| Page title / large title | --text-ui-page-title / --text-content-h3-bold, --color-foreground-level-1 |
| Subtext / eyebrow | --text-ui-text-small-regular, --color-foreground-medium-emphasis |
| AppHeader | --color-surface-level-1, --layout-micro block padding, --color-surface-level-3 line |
| PublicHeader | 64px, --space-container padding, --color-surface-level-1, --color-surface-level-3 line |
Notes from Figma
- The back button is a tertiary Small icon button in Default but a primary Medium one in Large Title and Inline Edit; code follows this.
- The Large Title texts use the legacy “Paragraph Small/Regular” and “H3/Bold” styles; code uses ui/text small/regular and content/h3/bold.
- Inline Edit uses a Floating Label Input that is not in the Input set; code uses Input Medium.
- The Large Title chip is the deprecated Chips; pass a Chip or Badge as badge.
- The Slot types (left, right, Full Slot) are the start, center, end and bottom props with your own content.
- App Header Type=Default has no border; Full Slot has a Border Bottom rectangle. Code makes the line optional with border.
Figma to code
| Figma | React |
|---|---|
| _Left Elements 🎛 Type = Default / Large Title | <PageHeader variant='default' | 'large' /> |
| _Left Elements 🎛 Type = Inline Edit | <PageHeader edit={…} /> |
| Show Back Button / Breadcrumb / Info / Subtitle / Actions | onBack / breadcrumb / info / subtitle / actions |
| _Right Elements 🎛 Type = Full Control | end={<Button />, <Switch />, <Selectbox />, <Segment />} |
| App Header Type = Default / Full Slot | <AppHeader start center end bottom /> |
| App Header Tab | bottom={<Tabs />} |
| Public Page Navigation = Public Logo | <PublicHeader /> |
| Public Page Navigation = Public Page Title | <PublicHeader title logoPosition="start" /> |
| Public Page Navigation = Login / Logged | <PublicHeader title end={<Button /> | <Avatar />} /> |