# Page header with tabs

Page header with tabs: a free component, built on your design tokens, to use at the top of a record page with several tabs. The top of a record page: breadcrumb, title with a favourite star and summary chips, two actions, and an underline tab bar with counts that scrolls on its own when narrow.

Prompt: Add the OpenDesigner component page-header-tabs to this project: https://opendesigner.dev/library/r/page-header-tabs.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: selected tab, hover, focus, starred, narrow.

Accessibility: Breadcrumb is a labelled nav with aria-current; the star is a toggle button with aria-pressed; tabs are a tablist with roving focus (arrow keys, Home, End).

File: https://opendesigner.dev/library/r/page-header-tabs.html