Skip to main content
On this page

Page

Page provides a consistent layout shell for application pages, including navigation aids, a title, page-level actions, and a content area.

When to use​

  • As the outermost layout wrapper for every application page, including dashboards, task flows, and informational views
  • Whenever a page needs a consistent title, back navigation, breadcrumbs, or page-level actions

When not to use​

  • For marketing or landing pages - page is designed for authenticated application views with a standard structure. Use a custom layout instead.
  • Inside a modal - content inside a Modal should not use the Page wrapper.

Anatomy​

  1. Waymarkers (navigation aids placed above the title; contains the back link and breadcrumbs)
  2. Back link (an icon link that navigates to the previous page)
  3. Breadcrumbs (a text trail showing the current page's position in the hierarchy)
  4. Header section (a flex row containing the title and page actions; stacks vertically on narrow viewports)
  5. Title (the page's h1 heading)
  6. Actions (page-level buttons displayed to the right of the title on wider viewports)
  7. Content (the main body of the page)

Basic usage​

Compose the sub-components inside Page in the order that matches the anatomy above.

Loading...
Edit live code
<Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.BackLink href="/" />
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Variants and features​

Max width​

By default, Page centres its content and constrains it to a maximum width of 160rem. Set maxWidth="none" to allow the content to fill the available width. Use this for pages that intentionally use full-width layouts, such as dashboards with wide data tables.

Loading...
Edit live code
<Page maxWidth="none">
  <Page.Header>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>This content fills the available width instead of being constrained to 160rem.</P>
  </Page.Content>
</Page>

Breadcrumbs​

Use Page.Breadcrumbs to show the current page's position within a hierarchy. Pass an array of strings as the breadcrumbs prop. The current page is not included. Breadcrumbs show the path to the current page, not the current page itself. The slash separator between items is added automatically and hidden from screen readers.

Include breadcrumbs whenever the page has a parent page in the information architecture.

Loading...
Edit live code
<Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.BackLink href="/" />
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Back link​

Use Page.BackLink to provide a single icon link that navigates to the previous page. It renders an arrow-left icon with a visually hidden "Back" label for screen readers.

Use the back link when the user is in a non-sequential flow and needs a quick way to return to a parent page. Avoid back links in multi-step forms, where back navigation should be handled by the form's own step controls, except on the first step where a back link to the previous page outside the form is appropriate.

Loading...
Edit live code
// Example only - always use within the Page component.
<Page.Waymarkers>
  <Page.BackLink href="/" />
</Page.Waymarkers>

Page title​

Page.Title renders the page's h1. It must be the only h1 on the page. The title must not end with a full stop or exclamation mark.

Page actions​

Use Page.Actions to place page-level controls to the right of the page title. Actions are spaced using the betweenButtons token and wrap using the Cluster layout.

A page must not have more than one primary action. One secondary action may accompany it. Do not combine a primary page action with another primary button in the page content, as this creates competing calls to action.

Loading...
Edit live code
<Page>
  <Page.Header>
    <Page.Waymarkers>
      <Page.Breadcrumbs breadcrumbs={[
        'Payments and refund',
        'Transactions history'
      ]} />
    </Page.Waymarkers>
    <Page.HeaderSection>
      <Page.Title>Transactions history</Page.Title>
      <Page.Actions>
        <PrimaryCTAButton>Add transaction</PrimaryCTAButton>
      </Page.Actions>
    </Page.HeaderSection>
  </Page.Header>
  <Page.Content>
    <P>Page content</P>
  </Page.Content>
</Page>

Combining waymarkers​

Back link and breadcrumbs can be used together in Page.Waymarkers when both are needed.

Loading...
Edit live code
// Example only - always use within the Page component.
<Page.Waymarkers>
  <Page.BackLink href="/" />
  <Page.Breadcrumbs breadcrumbs={[
    'Payments and refund',
    'Transactions history'
  ]} />
</Page.Waymarkers>