Page title
Page title provides the core information users need when viewing the page.
Last updated
Page title provides the core information users need when viewing the page.
Last updated
Page title is the very first component to appear on a page. Used as a header, it's a mandatory component to display on every page.
Page title should be:
Used as a page header
Always placed at the top of the page. No content can be placed above.
Only one Page Title per page.
There is only one mandatory feature to this component: the title itself H1 It summarizes the page content or gives the current object name/identifier. The title wraps onto multi-lines when scaling down the viewport.
Other features, such as Backlink, Subtext, Badge, Actions ,Image and Page Navigation are optional. They should only be displayed if the page content needs it.
Back Link: optional secondary navigation aid. It reminds the workflow architecture: from which section this page is placed.
Image: optional visual (e.g. store logo).
Title (H1): Title of the page
Badge: optional extra items to show status ("New", "Ongoing", "Invalid"...) or the result of an action that has been performed ("Submitted", "Pending",...). See Badge guidelines for more information.
Subtitle: provides users with additional information about the title or page content.
Page Navigation: helps organize content around a similar theme (an order, a client). The different tabs allow content to be viewed without navigating away from the main page.
Actions: modify the page and its content. Use primary, secondary, or ghost buttons. See Button Group guidelines for more information.
Additional Info on Page Title Actions:
The action buttons in the Page Title are static and should not change as the user navigates the page. Avoid replacing the Primary Button with a Destructive Button. Any potentially harmful action should be placed under the Menu Button.
The layout changes below 768px (mobile breakpoint) for better usability and to help the user to process the information. Back Link changes into an Icon Button. Button Group changes into Small Screen variant.
The link must always have the following structure:
Back to [landing page title]
The [landing page title] is the exact title of the page users will land on when clicking the link.
Do
Add a Backlink to guide users in page hierarchy
Respect content structure
Don't
Modify content structure by adding any other words such as "Go back to...","Let's go back to..." or "Take me back to..."
Let users take a guess on where backlink may take them to, always specify clearly where the link is pointed to.
Should we display a
prompt-before-leavewhen using the backlink?
A prompt-before-leave is an exit modale shown to users before they leave or close a page. It ask them to confirm their intent to leave the page.
It can appears in several situation : when using the backlink in the Page Title but also when closing the window or clicking into any other menu item. Thus, displaying it does not depends on where users clicks into but whether if he made any changes in the current page.
On form pristine: No Prompt-before-leave + Back to the previous page
On form dirty : Custom Prompt-before-leave when using Page-Title-Backlink
On form dirty : Browser Native Prompt-before-leave when using any other means to leave the page
Page Navigation is an option of Page Title and its presence influences the rest of the page content.
Page navigation shouldn’t be used:
for a completion path (use Stepper instead)
to display forms to complete
Do
Limit to 5 items maximum; otherwise, other items will be hidden under a More tab
Rank tabs in order of importance
You may use panel tabs within a Page Navigation item
Microcopy should be short, clear, without any variables
You may add a counter if needed (e.g. Messages (10))
Don't
Create a tab for a “select option" or a mini-feature.
💡 With our new sidebar, you can remove the Page navigation component and add subpages in a sidebar submenu.
Well-organized content helps users to orient themselves and to navigate effectively. Such content includes:
Pages must have clear titles. Use subtitles to describe page content if needed (for complex pages). Keep in mind Titles (<H1>) is also displayed in the navigator tab and will be the first element read by a screenreader. If the page title is not clear enough it may confuse users, not only those with screen readers but also those with multiple open pages.
DON'T Add a tooltip to a title. Title must be clear enough to understand page content. Use subtext if additional information is really needed.
Users are informed about their current location within a set of related pages. Use a backlink label to inform the higher-level page.
Always provide at least a title (H1) to a page
Respect content guidelines when naming a page
Use the optional feature carefully
Use only one primary action
Use Badge to display the object status
Do not overstack Page Title with unnecessary information
Do not use multiple Primary actions
Do not use very long titles
Do not use 1+ Badge within the Extra section
Do not use the backlink on section pages
Do not add a tooltip in Title
