The page title is the only required element in a landing page header. All other additions shown below are optional and depend on the situation.
Variations
Standard header
This is a barebones variation of the landing page header. Use this if you only need to show the page title.
Page Title
Standard header with primary button
Use this header when a user can take an action, or a few actions, from the landing page itself. If there is more than one action on the page, keep in mind that there should still only be one primary button.
Page Title
Standard header with dropdown menu
If a landing page header has more than three actions, all actions should roll into a dropdown menu.
Page Title
Standard header with tabs
Use this header if the user needs to be able to navigate between related data sets.
Page Title
Standard header with tabs and primary button
Use this header to navigate between related data sets and when the user can take a global action, or actions.
Page Title
Standard header with tabs and dropdown menu
Use this header to navigate between related data sets and when there are more than three actions.
Page Title
Configurations
The page title is the only required element in a landing page header. All elements in the table below are optional.
| Element | Purpose | Notes |
|---|---|---|
| Primary button | Navigates the user to a page or opens a modal where the user can create a new object. | Use when the user can only create one type of object. |
| Dropdown menu | Navigates the user to a page or opens a modal where the user can create a new object. | Use when the user can create more than one type of object. |
| Tabbed navigation | Allows the user to switch between data sets within a collection of related objects. | Use when there is a collection of related objects. |