Components Page header actions

Last updated: 11 October 2022

Open this example (Page header actions (example)) in a new window 
<div class="moj-page-header-actions">

  <div class="moj-page-header-actions__title">
    <h1 class="govuk-heading-xl">Documents</h1>
  </div>

  <div class="moj-page-header-actions__actions">

    <div class="moj-button-menu">
      <div class="moj-button-menu__wrapper">

        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary moj-page-header-actions__action" data-module="govuk-button">
          Upload new
        </button>

        <button type="submit" class="govuk-button moj-button-menu__item govuk-button--secondary moj-page-header-actions__action" data-module="govuk-button">
          Share collection
        </button>

      </div>
    </div>

  </div>

</div>


{% from "moj/components/page-header-actions/macro.njk" import mojPageHeaderActions %}

{{ mojPageHeaderActions({
  heading: {
    text: 'Documents'
  },
  items: [{
    text: 'Upload new',
    classes: 'govuk-button--secondary'
  }, {
    text: 'Share collection',
    classes: 'govuk-button--secondary'
  }]
}) }}

To use the component in your design, add the MoJ Figma Kit to your Figma libraries and find the component using the Assets tab.

View component in MoJ Figma Kit

When to use

Use the page header actions component for certain actions.

Use this when:

  • the content of the page is so long that users have to scroll past it to see actions. For example, having a “Create case” button underneath a long list of cases.
  • the action is applied to the page item and not one specific part of the content. For example, in a user profile page, it could make sense to put the “Suspend user” action in the header.

When not to use

Don’t place buttons next to the header when they are specific to a component within the page.

How to use

The component ensures the buttons are aligned right in line with the heading. On small screens the buttons tuck underneath the heading.