Components Button menu
Last updated: 11 October 2022
<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.
<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.
<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",
});