Page head
The top of a page: the way back, the page's icon and title, its actions, and one line saying what it is for.
openvibe-shared/kitJSON
Build it
kit.pageHead({ back: { href: '/kit', label: 'Rooms' }, icon: 'chat', title: 'Night owls', lede: 'A room for people who stream after midnight.', actions: [{ icon: 'share', label: 'Share' }, { icon: 'more', label: 'More' }] })Props
back- any?
icon- string?
lede- string?
title- string?
actions- list?
Anatomy
- pageHeadThe top of a page: the way back, the page's icon and title, its actions, and one line saying what it is for.
Behaviour and access
- Keyboard
- Standard focus order
- Outside tap
- Leaves it open
- Scroll
- The page still scrolls
- Reduced motion
- Remove movement; keep the state change.
- Name
- Page head
- Target
- At least 44 × 44 px on touch
- Focus
- Visible keyboard focus; follow reading order
States
- default
Tokens
color.text.primarysize.tap
Android · Jetpack Compose
TopAppBar
Use a TopAppBar with a navigationIcon for back, the page title, and actions; the icon and lede sit below it.
iOS · SwiftUI
Use .navigationTitle with a leading back ToolbarItem, trailing actions and .toolbarTitleDisplayMode.
Markup
Default
<header class="ovk-page-head"><a class="ovk-page-back" href="/kit"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7"/></svg><span>Rooms</span></a><div class="ovk-page-head-row"><span class="ovk-heading-icon"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 5h16v11H8l-4 4Z"/></svg></span><h1>Night owls</h1><div class="ovk-page-actions"><button class="ovk-icon-btn" type="submit" aria-label="Share" title="Share"></button><button class="ovk-icon-btn" type="submit" aria-label="More" title="More"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/></svg></button></div></div><p class="ovk-page-lede">A room for people who stream after midnight.</p></header>