Header Primary is used in conjunction with our Level 1 and Level 2 Page Layouts to help users orient themselves on the page, and may present one or more actions relevant to the page content.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Breadcrumbs |
Breadcrumbs are a series of links to help users understand their location in the page hierarchy. |
Yes |
|
2. Avatar |
An Avatar is a small visual representation of a user or entity. |
Yes |
|
3. Title |
Concise summary of the Level 1 or Level 2 Outer Page Layout’s content. |
No |
|
4. Badge |
A Badge highlights the status of the page. |
Yes |
|
5. Title Icon |
Icon next to the title that may be interactive, e.g., a star icon to favorite a project. |
Yes |
|
6. Secondary Action 1 |
A secondary Button to display on the right side of the header. |
Yes |
|
7. Secondary Action 2 |
A secondary Button to display on the right side of the header. |
Yes |
|
8. Primary Action |
A primary Button to display on the right side of the header, e.g., Save. |
Yes |
|
9. Overflow Actions |
Yes |
|
|
10. Status Section |
Space reserved for the Progress Tracker. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| hasBreadcrumbs Boolean | true | false | true |
| hasAvatar Boolean | true | false | true |
| hasTitleIcon Boolean | true | false | false |
| hasActions Boolean | true | false | true |
| ↳ showHidePrimary Boolean | true | false | true |
| ↳ showHideSecondary2 Boolean | true | false | true |
| ↳ showHideOverflow Boolean | true | false | true |
| ↳ showHideSecondary1 Boolean | true | false | true |
| hasBadge Boolean | true | false | false |
| hasStatusSection Boolean | true | false | false |
| ✏️ title Text | string | Page title |
Component dependencies
This component is internally dependent on the following components:
System Icons
Avatar
Avatar is a visual representation of a user (person) or entity (such as Spaces, Projects, or Tenants).
Badge
Highlights the status of a corresponding object.
Breadcrumbs
Button
Menu
Progress Tracker
The Progress Tracker guides users through multi-step workflows, showing completed, current, and incomplete steps, helping them stay oriented across multiple screens.
Tooltip
Related Components
Page Layout
A collection of flexible components designed to structure and organize content consistently across pages
Header Secondary
A highly customisable header for sections of a page or drawer