Page title
Page title provides the core information users need when viewing the page.
Overview
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 Titleper page.
Guidelines
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. It also provides easy access to a higher-level section, regardless of where users came from.
Image: optional visual (e.g. store logo).
Title (H1):
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. Learn more about Page Navigation
Actions: modify the page and its content. Use primary, secondary, or ghost buttons. See Button Group guidelines for more information.
Do not override the Primary Button with a Destructive Button in the Page Title
Any action that might have a destructive impact on the page should be placed under Menu Button. Learn more about Menu Button guidelines
Small screens specifics
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.
Page Navigation
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
Best practices
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))
💡 With our new sidebar, you can remove the Page navigation component and add subpages in a sidebar submenu.
Avoid creating a tab for a “select option or a mini-feature.
Accessibility
Well-organized content helps users to orient themselves and to navigate effectively. Such content includes:
Pages have clear titles. Use subtitles to describe page content if needed (for complex pages).
Users are informed about their current location within a set of related pages. Use a backlink label to inform the higher-level page.
Key takeaways
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
Last updated
