Components Button menu

Last updated: 11 October 2022

Open this example (Button menu (example)) in a new window 
<div class="moj-button-menu">
  <div class="moj-button-menu__wrapper">

    <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item  " data-module="govuk-button">
      Primary action
    </a>

    <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
      Second action
    </a>

    <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
      Third action
    </a>

  </div>
</div>
Nunjucks macro options

Container

Name Type Required Description
items array Yes An array of button item objects. See items.
buttonClasses String No Classes to add to the button items.
attributes Object No HTML attributes (for example data attributes) to add to the button group.

Items

See the button component in the GOV.UK Design System for more details.

Name Type Required Description
element String No Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text String Yes If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html String Yes If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name String Yes Name for the input or button. This has no effect on a elements.
type String Yes Type of input or button. The options are button, submit or reset. Defaults to submit. This has no effect on a elements.
value String Yes Value for the button tag. This has no effect on a or input elements.
disabled Boolean No Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href String No The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes String No Classes to add to the button component.
attributes Object No HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick Boolean No Prevent accidental double clicks on submit buttons from submitting forms multiple times.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.


{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu -%}

{{ mojButtonMenu({
  items: [{
    text: "Primary action",
    href: "#"
  }, {
    text: "Second action",
    href: "#",
    classes: "govuk-button--secondary"
  }, {
    text: "Third action",
    href: "#",
    classes: "govuk-button--secondary"
  }]
}) }}

When to use

Use the button menu component to group buttons together in a row or collapsible menu.

Use this component when the there are a number of possible actions the user can take.

When not to use

Don't use this component when a basic in-page form has multiple actions.

How to use

By default this component just groups buttons together to ensure they are spaced correctly. But can be turned into a toggle menu at a configurable screen width that:

  • is aligned right or left
  • is coloured green (primary) or grey (secondary)

Left aligned grey toggle menu

Use the grey clour when it's not the main action the user needs to take.

Open this example (Button menu (example)) in a new window 
<div class="moj-button-menu">
  <div class="moj-button-menu__wrapper">

    <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
      First action
    </a>

    <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
      Second action
    </a>

    <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
      Third action
    </a>

  </div>
</div>
Nunjucks macro options

Container

Name Type Required Description
items array Yes An array of button item objects. See items.
buttonClasses String No Classes to add to the button items.
attributes Object No HTML attributes (for example data attributes) to add to the button group.

Items

See the button component in the GOV.UK Design System for more details.

Name Type Required Description
element String No Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text String Yes If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html String Yes If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name String Yes Name for the input or button. This has no effect on a elements.
type String Yes Type of input or button. The options are button, submit or reset. Defaults to submit. This has no effect on a elements.
value String Yes Value for the button tag. This has no effect on a or input elements.
disabled Boolean No Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href String No The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes String No Classes to add to the button component.
attributes Object No HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick Boolean No Prevent accidental double clicks on submit buttons from submitting forms multiple times.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.


{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu -%}

{{ mojButtonMenu({
  items: [
    {
      text: "First action",
      href: "#",
      classes: "govuk-button--secondary"
    },
    {
      text: "Second action",
      href: "#",
      classes: "govuk-button--secondary"
    },
    {
      text: "Third action",
      href: "#",
      classes: "govuk-button--secondary"
    }
  ]
}) }}

new MOJFrontend.ButtonMenu({
  container: $(".moj-button-menu"),
  mq: "(min-width: 200em)",
  buttonText: "Menu",
  buttonClasses:
    "govuk-button--secondary moj-button-menu__toggle-button--secondary",
});

Right aligned green toggle menu

Use the green colour when it's the main action the user needs to take.

Open this example (Button menu (example)) in a new window 
<div style="float: right;">

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

      <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item  " data-module="govuk-button">
        First action
      </a>

      <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
        Second action
      </a>

      <a href="#" role="button" draggable="false" class="govuk-button moj-button-menu__item govuk-button--secondary " data-module="govuk-button">
        Third action
      </a>

    </div>
  </div>

</div>
Nunjucks macro options

Container

Name Type Required Description
items array Yes An array of button item objects. See items.
buttonClasses String No Classes to add to the button items.
attributes Object No HTML attributes (for example data attributes) to add to the button group.

Items

See the button component in the GOV.UK Design System for more details.

Name Type Required Description
element String No Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text String Yes If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html String Yes If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name String Yes Name for the input or button. This has no effect on a elements.
type String Yes Type of input or button. The options are button, submit or reset. Defaults to submit. This has no effect on a elements.
value String Yes Value for the button tag. This has no effect on a or input elements.
disabled Boolean No Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href String No The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes String No Classes to add to the button component.
attributes Object No HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick Boolean No Prevent accidental double clicks on submit buttons from submitting forms multiple times.

Warning: If you’re using Nunjucks macros in production be aware that using HTML arguments, or ones ending with .html can be at risk from cross-site scripting attacks. More information about security vulnerabilities can be found in the Nunjucks documentation.


{%- from "moj/components/button-menu/macro.njk" import mojButtonMenu -%}

<div style="float: right;">
  {{ mojButtonMenu({
    items: [{
      text: "First action",
      href: "#"
    }, {
      text: "Second action",
      href: "#",
      classes: "govuk-button--secondary"
    }, {
      text: "Third action",
      href: "#",
      classes: "govuk-button--secondary"
    }]
  }) }}
</div>

new MOJFrontend.ButtonMenu({
  container: $(".moj-button-menu"),
  mq: "(min-width: 200em)",
  buttonText: "Actions",
  menuClasses: "moj-button-menu__wrapper--right",
});