Components Page header actions

Last updated: 29 March 2022

<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 class="govuk-button moj-button-menu__item govuk-button--secondary moj-page-header-actions__action" data-module="govuk-button">
          Upload new
        </button>

        <button 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'
  }]
}) }}

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.