Pane menu component

The pane menu allows users to perform actions related to the pane content

Structure

The pane menu is a dropdown with a list of actions in the following format: {Action icon}{Action name}

When an action is dangerous, it should be in red and placed at the end of the list (if it is not a primary action).

To create a multisectioned menu, the menu section component should be used.

Result pane menu

The result pane menu can be divided into 2 sections, allowing users to perform actions and customize layout.

Record pane menu

In general, the record pane menu has only one section with the following default actions: Duplicate, bookmark, fullscreen and delete.

Actions can vary depending on the context.

Edit, duplicate & new record panes menu

In general, those pane menus have only one section with “Cancel” as a default action.

Actions can vary depending on the context.

Behavior

By tapping on the pane header ellipsis icon found in the primary button, the menu should appear.

Only actions related to pane content shall be added in the menu. For any actions related to controlling the pane, see the icon button section.

Good example

Good - pane menu

Bad example

bad-pane-menu

"Close" is not an action related to pane content

If an action is not available, it should have a 70% opacity with subtitle in the following format: {Action name} unavailable”.

When FOLIO cannot identify if an action will be available beforehand, a modal shall appear on click, letting users know the action is unavailable.

Modal after clicking on "Delete".