Head

The top of an app page: back, the title, one muted line, icon actions and the tabs. It sticks under the navbar.

openvibe-shared/kitJSON

Build it

kit.head({ title: 'Settings', sub: 'Saved to your account', back: { href: '/', label: 'Home' }, level: 2, sticky: false, actions: [kit.iconButton({ href: '/help', icon: 'help', label: 'Help' })], tabs: kit.tabs({ base: '/kit/head', items: [{ key: 'look', label: 'Look' }, { key: 'sound', label: 'Sound' }, { key: 'privacy', label: 'Privacy' }], active: 'look' }) })

Props

sub: string?
back: any?
icon: string?
tabs: string?
level: number?
title: string?
sticky: any?
actions: list?
subHtml: any?
titleHtml: any?

Anatomy

headThe top of an app page: back, the title, one muted line, icon actions and the tabs. It sticks under the navbar.

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: Head
Target: At least 44 × 44 px on touch
Focus: Visible keyboard focus; follow reading order

States

default

Tokens

color.text.primary
size.tap

Android · Jetpack Compose

TopAppBar

Use a TopAppBar for the title and actions; put the tabs in a ScrollableTabRow below it.

iOS · SwiftUI

Use .navigationTitle, .toolbar for actions, and a Picker or a horizontal ScrollView for the tabs.

Markup

Default

<header class="ovk-head ovk-head--static"><div class="ovk-head-row"><a class="ovk-icon-btn ovk-back" href="/" aria-label="Home" title="Home"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 5l-7 7 7 7"/></svg></a><div class="ovk-head-id"><h2>Settings</h2><p class="ovk-sub">Saved to your account</p></div><div class="ovk-head-tools"><a class="ovk-icon-btn" href="/help" aria-label="Help" title="Help"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="8.5"/><path d="M9.6 9.3a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.2-2.4 3.8M12 17h.01"/></svg></a></div></div><nav class="ovk-tabs" aria-label="Sections"><a href="/kit/head?tab=look" aria-current="page"><span>Look</span></a><a href="/kit/head?tab=sound"><span>Sound</span></a><a href="/kit/head?tab=privacy"><span>Privacy</span></a></nav></header>