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 Title per 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.

  1. Back Link: optional secondary navigation aid. It reminds the workflow architecture: from which section this page is placed.

  2. Image: optional visual (e.g. store logo).

  3. Title (H1): Title of the page

  4. 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.

  5. Subtitle: provides users with additional information about the title or page content.

  6. 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.

  7. 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.

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 title for small screens

Backlink

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.

Frequently Asked Questions

Should we display a prompt-before-leave when 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.

Exemple of a Prompt Before You Leave

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

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.

Accessibility

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.

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

  • Do not add a tooltip in Title

Last updated

Was this helpful?