# Header sections > The top of an inner page, with an eyebrow, the page's h1 and a line, plus buttons, an email signup, a search field or a billing switch. URL: https://apogee.avaui.dev/docs/header-sections Last updated: 2026-10-20 The top of an inner page, with an eyebrow, the page's h1 and a line, plus buttons, an email signup, a search field or a billing switch. Last updated October 20, 2026 Each example is a block: a [Section](https://apogee.avaui.dev/docs/section) with a [SectionHeader](https://apogee.avaui.dev/docs/section-header), centred, left-aligned or split, on the page or the brand colour. Some add buttons, an email signup, a search field or a [SegmentedControl](https://apogee.avaui.dev/docs/segmented-control). ```sh npx @ava-ui/apogee add header/centered ``` ## Copy is props Every block in this family takes the same content props (`PageHeaderContent` in `sections/_shared/header.ts`), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The [PageHeader](https://apogee.avaui.dev/docs/sections/page-header) section takes the same names for the props they share. - `breadcrumbs` - `eyebrow`: The small label above the heading. - `heading`: The heading. - `description`: The line under the heading. - `primaryAction`: The solid button. - `secondaryAction`: The outline button. - `tabs`: Tab links under the title. - `tabsLabel`: Name of the tabs nav. - Pass `null` to hide an optional part, such as `description={null}`. - Some blocks add props of their own; the top of each block’s file lists them. [ ![](https://apogee.avaui.dev/thumbs/header-sections__centered.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered.dark.webp) CenteredA centred eyebrow, heading and line. ](https://apogee.avaui.dev/docs/header-sections/centered)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-brand.dark.webp) Centered brandA centred eyebrow, heading and line on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/centered-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-buttons.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-buttons.dark.webp) Centered buttonsA centred heading, line and two buttons. ](https://apogee.avaui.dev/docs/header-sections/centered-buttons)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-buttons-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-buttons-brand.dark.webp) Centered buttons brandA centred heading, line and two buttons on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/centered-buttons-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-email.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-email.dark.webp) Centered emailA centred heading, line and email signup. ](https://apogee.avaui.dev/docs/header-sections/centered-email)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-email-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-email-brand.dark.webp) Centered email brandA centred heading, line and email signup on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/centered-email-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-search.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-search.dark.webp) Centered searchA centred heading, line and search field. ](https://apogee.avaui.dev/docs/header-sections/centered-search)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-search-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-search-brand.dark.webp) Centered search brandA centred heading, line and search field on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/centered-search-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-tabs.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-tabs.dark.webp) Centered tabsA centred heading, line and a billing switch. ](https://apogee.avaui.dev/docs/header-sections/centered-tabs)[ ![](https://apogee.avaui.dev/thumbs/header-sections__centered-tabs-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__centered-tabs-brand.dark.webp) Centered tabs brandA centred heading, line and a billing switch on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/centered-tabs-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left.dark.webp) LeftA left-aligned eyebrow, heading and line. ](https://apogee.avaui.dev/docs/header-sections/left)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-brand.dark.webp) Left brandA left-aligned eyebrow, heading and line on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/left-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-buttons.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-buttons.dark.webp) Left buttonsA left-aligned heading, line and two buttons. ](https://apogee.avaui.dev/docs/header-sections/left-buttons)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-buttons-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-buttons-brand.dark.webp) Left buttons brandA left-aligned heading, line and two buttons on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/left-buttons-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-email.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-email.dark.webp) Left emailA left-aligned heading, line and email signup. ](https://apogee.avaui.dev/docs/header-sections/left-email)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-email-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-email-brand.dark.webp) Left email brandA left-aligned heading, line and email signup on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/left-email-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-search.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-search.dark.webp) Left searchA left-aligned heading, line and search field. ](https://apogee.avaui.dev/docs/header-sections/left-search)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-search-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-search-brand.dark.webp) Left search brandA left-aligned heading, line and search field on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/left-search-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-tabs.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-tabs.dark.webp) Left tabsA left-aligned heading, line and a billing switch. ](https://apogee.avaui.dev/docs/header-sections/left-tabs)[ ![](https://apogee.avaui.dev/thumbs/header-sections__left-tabs-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__left-tabs-brand.dark.webp) Left tabs brandA left-aligned heading, line and a billing switch on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/left-tabs-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between.dark.webp) Space betweenA split eyebrow, heading and line. ](https://apogee.avaui.dev/docs/header-sections/space-between)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-brand.dark.webp) Space between brandA split eyebrow, heading and line on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/space-between-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-buttons.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-buttons.dark.webp) Space between buttonsA split heading, line and two buttons. ](https://apogee.avaui.dev/docs/header-sections/space-between-buttons)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-buttons-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-buttons-brand.dark.webp) Space between buttons brandA split heading, line and two buttons on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/space-between-buttons-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-email.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-email.dark.webp) Space between emailA split heading, line and email signup. ](https://apogee.avaui.dev/docs/header-sections/space-between-email)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-email-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-email-brand.dark.webp) Space between email brandA split heading, line and email signup on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/space-between-email-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-search.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-search.dark.webp) Space between searchA split heading, line and search field. ](https://apogee.avaui.dev/docs/header-sections/space-between-search)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-search-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-search-brand.dark.webp) Space between search brandA split heading, line and search field on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/space-between-search-brand)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-tabs.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-tabs.dark.webp) Space between tabsA split heading, line and a billing switch. ](https://apogee.avaui.dev/docs/header-sections/space-between-tabs)[ ![](https://apogee.avaui.dev/thumbs/header-sections__space-between-tabs-brand.light.webp)![](https://apogee.avaui.dev/thumbs/header-sections__space-between-tabs-brand.dark.webp) Space between tabs brandA split heading, line and a billing switch on the brand colour. ](https://apogee.avaui.dev/docs/header-sections/space-between-tabs-brand) ## Related [ SectionHeaderEyebrow, heading and description at the top of a section or an app page, with actions, a divider and the level, alignment and colours every section shares. ](https://apogee.avaui.dev/docs/section-header)[ EyebrowA small label above a heading, for section tags and category kickers. ](https://apogee.avaui.dev/docs/eyebrow)[ SegmentedControlA row of connected, mutually exclusive options backed by native radios — pick one from a small, always-visible set. ](https://apogee.avaui.dev/docs/segmented-control)