Skip to content
Telescope

Action MenuNew

Enable users to trigger actions from a list in a popover when space is limited.

Features

  • The menu can be triggered by any type of button.
  • Supports destructive actions.
  • Supports items with icons and descriptions.
  • Items can be grouped with separators.
  • Supports items that behave like radio buttons.

Examples

Trigger

The trigger can be any type of button, including custom buttons.

Destructive

Destructive actions are actions that result in significant and often irreversible consequences, such as data deletion or permanent changes. When an action is destructive, add the isDestructive prop to the item to change its appearance. Place destructive actions at the bottom of the list to prevent users from accidentally clicking them.

Separator

Place separators between groups of actions that are related to each other. For example, you might group actions by type, such as editing, sharing, and destructive actions.

Icon

Add icons to help users understanding the meaning of actions. Icons can also make actions more recognisable and distinguishable. This can help users quickly find the action they're looking for. Note, either add icons to all of the actions in an ActionMenu or none of them.

Description

Add a description when an action is not self-explanatory. Note, you don't need to add a description to every action.

Radio Group

Actions can be mutually exclusive. For example, you might want to let users choose between a list, gallery, or timeline view. In cases like this, use ActionMenu.RadioItem components and wrap them in an ActionMenu.RadioGroup component. The items will now behave like radio buttons, and only one can be selected at a time.

Best practices

Do
Use an Action Menu when space is limited
Don't
Use an Action Menu when there is sufficient space to use buttons
Do
Use an Action Menu when there are at least two actions.
Don't
Use an Action Menu when there is only a single action.
Do
Order the actions by importance and frequency of use.
Don't
Order the actions randomly.
Do
Use short and descriptive labels.
Don't
Use long and repetitive labels.

Related components

  • Button: A clickable element which communicates that users can trigger an action.
  • Button group: A layout component used to group multiple related actions a user can take.
  • Icon button: Enables users to control the visibility of other UI elements.