Header Secondary is used in the Level 2 Inner Page Layout to help users orient themselves on the page, and may present one or more actions relevant to the inner 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. Title Complementary Text |
Additional text to show immediately after the title with less emphasis. |
Yes |
|
5. Title Accessory |
An element which can be used to display in addition to the title, such as a native select. |
Yes |
|
6. Title Badge |
A Badge highlights the status of the page. |
Yes |
|
7. Secondary Action 1 |
A secondary Button to display on the right side of the header. |
Yes |
|
8. Secondary Action 2 |
A secondary Button to display on the right side of the header. |
Yes |
|
9. Primary Action |
A primary Button to display on the right side of the header, e.g., Save. |
Yes |
|
10. Overflow Actions |
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 |
| hasTitleStatusIcon Boolean | true | false | true |
| hasTitleAccessory Boolean | true | false | true |
| hasTitleBadge Boolean | true | false | true |
| ↳ showHidePrimary Boolean | true | false | true |
| hasActions Boolean | true | false | true |
| ↳ showHideSecondary1 Boolean | true | false | true |
| ↳ showHideOverflow Boolean | true | false | true |
| ↳ showHideSecondary2 Boolean | true | false | true |
| ↳ ✏️ titleComplementaryText Text | string | (archived) |
| hasTitleComplementaryText Boolean | true | false | false |
| ✏️ title Text | string | sectionTitle sectionTitle |
| isSticky Variant | false | true | false |
Sticky
The isStickied prop indicates that the HeaderSecondary component should be in a sticky state when scrolling. This state adds a shadow to indicate that the header overlaps the content underneath, and avoids it blending into other content.
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
Tooltips display informative text when users hover over an element.
Related Components
Page Layout
A collection of flexible components designed to structure and organize content consistently across pages
Header Primary
The header for a Level 1 or Level 2 Page Layout