# Page title

## Overview <a href="#id-5999c3" id="id-5999c3"></a>

<figure><img src="https://zeroheight.com/uploads/zGjSWykiQXAShFWjIoXpEg.png" alt=""><figcaption></figcaption></figure>

`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 <a href="#id-41e842" id="id-41e842"></a>

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.

<br>

<figure><img src="https://zeroheight.com/uploads/uJUw2f-hXcG5h1stemm4mQ.png" alt=""><figcaption></figcaption></figure>

1. **Back Link**: optional secondary navigation aid. It reminds the workflow architecture: from which section this page is placed.&#x20;
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](https://design.mirakl.com/design/components/feedback/badge-status) 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.&#x20;
7. **Actions**: modify the page and its content. Use primary, secondary, or ghost buttons. See [Button Group guidelines](https://design.mirakl.com/design/components/actions/button-group) for more information.

{% hint style="info" %}
**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.
{% endhint %}

### Small screens specifics <a href="#id-121f2d" id="id-121f2d"></a>

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`](https://design.mirakl.com/design/actions/buttons#icon-button). Button Group changes into Small Screen variant.

<figure><img src="https://zeroheight.com/uploads/PVqdYLNG_HRYE4d0WCK9PQ.png" alt="" width="375"><figcaption><p>Page title for small screens</p></figcaption></figure>

### Backlink <a href="#id-8396b2" id="id-8396b2"></a>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F5NicCdNnrw8k1viKUiHF%2FBacklink.svg?alt=media&#x26;token=0ec78bb6-f3dd-4cb4-a780-07299444feec" alt=""><figcaption></figcaption></figure>

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.

{% hint style="success" %} <mark style="color:green;">**Do**</mark>

* Add a Backlink to guide users in page hierarchy&#x20;
* Respect content structure
  {% endhint %}

{% hint style="danger" %} <mark style="color:red;">**Don't**</mark>

* 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.
  {% endhint %}

#### <mark style="color:blue;">Frequently Asked Questions</mark>

> 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.&#x20;

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2F6aBlwk4sZ8FG82A0rl6I%2Fprompt.svg?alt=media&#x26;token=b0571ade-a40c-41fa-acc4-b802afdc3c3a" alt=""><figcaption><p>Exemple of a Prompt Before You Leave</p></figcaption></figure>

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 <a href="#id-8396b2" id="id-8396b2"></a>

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2FKkEuMMelJXxZd7zq63DU%2FPage%20Navigation.png?alt=media&#x26;token=18739cd9-e10d-41a7-a404-b89bc5f4d1be" alt=""><figcaption></figcaption></figure>

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

{% hint style="success" %} <mark style="color:green;">**Do**</mark>

* 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))
  {% endhint %}

{% hint style="danger" %} <mark style="color:red;">**Don't**</mark>

* Create a tab for a “select option" or a mini-feature.
  {% endhint %}

{% hint style="info" %}
💡 With our new sidebar, you can remove the Page navigation component and add subpages in a sidebar submenu.
{% endhint %}

## Accessibility <a href="#id-71b0b4" id="id-71b0b4"></a>

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.

{% hint style="warning" %} <mark style="color:red;">**DON'T**</mark> Add a tooltip to a title. Title must be clear enough to understand page content. Use subtext if additional information is *really* needed.
{% endhint %}

* 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 <a href="#id-8864e6" id="id-8864e6"></a>

{% hint style="success" %}

* 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
  {% endhint %}

{% hint style="danger" %}

* 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
  {% endhint %}