> For the complete documentation index, see [llms.txt](https://design.mirakl.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/actions/action-menu.md).

# Action menu

An action menu shows a list of items presenting the user with actions that can have an immediate effect, or a redirection to another section of the Mirakl platform.

<figure><img src="https://1297765105-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMoZPkWOmnKvoMWGW4aeM%2Fuploads%2Fttn4R6mUSH40ki9rNq0k%2FActionMenu%20Hero.png?alt=media&amp;token=5b8dc620-90e5-4e4f-b366-15ca00f28665" alt="2 versions of an action menu"><figcaption></figcaption></figure>

## Overview

Action menus are displayed to the user after a click on a button ([Split Button](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/buttons.md#split-button), [Menu Button](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/buttons.md#menu-button), [Icon Button](/~/changes/DpgERwSwrKIthStzL4D6/components/actions/buttons.md#icon-button)).

## Guidelines <a href="#id-5758e9" id="id-5758e9"></a>

* Must be used for secondary (or sub-)actions that do not require to be visible right away
* Contain actions related to the same object or related to each other.
* Clicking on an item automatically triggers the associated action. Must lead to visual feedback showing the effect and the result of the action to the user or redirect him to the appropriate section of the Mirakl platform.
* Large lists should be avoided. Items in the action list can have nested submenus.
* Items with sub-menus do not contain any related actions other than opening the sub-menu
* A sub-menu list holds the name of its parent item.
* If all actions are disabled, consider disabling the parent component

## Accessibility <a href="#id-69483d" id="id-69483d"></a>

* The first item is automatically given focus when the action menu is triggered with the keyboard
* Navigate through the list using the arrow keys
* Give focus to the list's parent element by pressing the `Esc` or `Shift+Tab` key while on the first item of the list.
* Activate the action using the `enter/return` key or the `space` key

## Key takeaways <a href="#id-8864e6" id="id-8864e6"></a>

{% hint style="success" %}

* Group actions within the menu
  {% endhint %}

{% hint style="danger" %}

* Mix items with icons and items without icons
* Use 2 separators in a row
* Use a separator for the last item on the list
  {% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://design.mirakl.com/~/changes/DpgERwSwrKIthStzL4D6/components/actions/action-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.