Skip to content

Primer/Interface guidelines

Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

Action menu

Action menu is composed of action list and overlay patterns used for quick actions and selections.

On this page
v0.1.9AlphaNot reviewed for accessibility

NOTE: These docs are being migrated. The originals are available here.

Description

ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when users interact with buttons, actions, or other controls.

The only allowed elements for the Item components are: :a, :button, and :clipboard-copy. The default is :button.

Arguments

NameDefaultDescription
menu_id

self.class.generate_id

String

Id of the menu.

anchor_align

:start

Symbol

One of :center, :end, or :start..

anchor_side

:outside_bottom

Symbol

One of :inside_bottom, :inside_center, :inside_left, :inside_right, :inside_top, :outside_bottom, :outside_left, :outside_right, or :outside_top..

size

:auto

Symbol

One of :auto, :large, :medium, :medium_portrait, :small, or :xlarge..

src

nil

String

Used with an include-fragment element to load menu content from the given source URL.

preload

false

Boolean

When true, and src is present, loads the include-fragment on trigger hover.

dynamic_label

false

Boolean

Whether or not to display the text of the currently selected item in the show button.

dynamic_label_prefix

nil

String

If provided, the prefix is prepended to the dynamic label and displayed in the show button.

select_variant

:none

Symbol

One of :multiple, :none, or :single.

form_arguments

{}

Hash

Allows an ActionMenu to act as a select list in multi- and single-select modes. Pass the builder: and name: options to this hash. builder: should be an instance of ActionView::Helpers::FormBuilder, which are created by the standard Rails #form_with and #form_for helpers. The name: option is the desired name of the field that will be included in the params sent to the server on form submission.

system_arguments

N/A

Hash

System arguments.

Examples

View in Lookbook

Slots

show_button

Button to activate the menu.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by Primer::Alpha::Overlay's show_button slot.

items

Adds a new item to the list.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ActionList::Item.

Methods

list

Returns the value of attribute list.

preload

Returns the value of attribute preload.

preload?

Returns the value of attribute preload.

with_show_button

Button to activate the menu.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by Primer::Alpha::Overlay's show_button slot.

with_item

Adds a new item to the list.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ActionList::Item.

with_divider

Adds a divider to the list.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ActionList's divider slot.

ActionMenu::List

This component is part of ActionMenu and should not be used as a standalone component.

Arguments

NameDefaultDescription
menu_id

N/A

String

ID of the parent menu.

system_arguments

N/A

Hash

The arguments accepted by ActionList

Slots

heading

Heading text rendered above the list of items.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ActionList::Heading.

items

Items.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ActionList::Item.

Methods

with_item

Adds a new item to the list.

NameDefaultDescription
data

{}

Hash

When the menu is used as a form input (see the ActionMenu docs), the label is submitted to the server by default. However, if the data: { value: } or "data-value": attribute is provided, it will be sent to the server instead.

system_arguments

N/A

Hash

The same arguments accepted by ActionList::Item.