Menu

A menu is a list of options or actions that users can choose from.

Usage

We offer a variety of menu variations, which address a range of design goals. The type of menu you should use depends on your scenario.

Goal
Solution
Expose a list of actions
Action menu

Menu items are actions or links, with optional preceding icons to improve recognizability or an optional description to provide more context.
Create logical groupings of menu items
Grouped menu with separators

If the meaning of the groups isn't obvious, add group headings.
Expose a list of nested actions
Fly-out menu

Optionally, add basic menu attributes, including icons, groups, and descriptions.
Select from a list of options
Options select menu

Let users select between values rather than actions. To further improve recognition or create logical option groups, use icons, descriptions, and groupings.

Behavior

Searchable menus

You can allow users to filter menu items via search input, which matches menu items to a term that the user has entered. If there are no results for their search term, display a message to communicate "No results found":

Searchable menu with no results matching the search term.

Variations

Action menu

An action menu presents a list of actions or links.

Examples of action menus.
  1. Menu item: Menu items represent discrete actions that can be taken. Selecting a menu item inside a dropdown will trigger the action and dismiss the menu, while selecting a menu item inside a select list will select the item.

  2. Icon (optional): Familiar icons may be included before each menu item to accelerate text label recognition. Only use icons if they will be easily recognized and distinguished from one another. Never use them simply for decoration.

  3. Links: Links navigate the user to a new page. They may be mixed with actions in a menu or used in their place. If the link will open in a new window, use the external link icon to annotate the link so that users can expect this behavior.

  4. Descriptions (optional): Descriptive text may be added below each menu item, but only when the menu item label itself may not be clear to all users. Keep descriptive text to 2 lines or less.

Option select menus

Use an option select menu when you want to persist selected items. This is typically the case for select menus or settings menus that allow users to select between multiple options. For more details, see the select and options menu components. You may present single or multiple groups of options within the same menu.

Examples of option select menus.
  1. Selected item: Selected items are indicated by a checkmark to the right of their label.

  2. Icon (optional): Familiar icons may be placed before each menu item to accelerate text label recognition. Only use icons if they will be easily recognized and distinguished from one another. Never use icons simply for decoration.

  3. Descriptions (optional): Descriptive text may be added below each menu item, but only when the menu item label itself may not be clear to all users. Keep descriptive text to 2 lines or less.

Grouped menus

You may decide to group menu items to associate related items and/or to indicate a hierarchy of items. Items may be grouped using group headings and/or separators or in a tree view.

Examples of grouped menus.
  1. Group heading (optional): Add a group heading when you want to name the group.

  2. Separator (optional): Separators are horizontal dividers that help to group the menu items by clearly showing where one group ends and the next begins. You should consider whether a separator is needed to create visually distinct groups. In the first example above, a separator is used to create separation between the two groups of items. In the second example, the separator is not needed because the titled checkbox groups create 2 clearly grouped sets of options on their own.

  3. Expand/collapse: The group heading or parent node would have the option to expand or collapse to reveal child nodes.

  4. Parent node: A menu item that contains child nodes/options a user can select.

  5. Child node: A menu item within the parent node that a user can select.

  6. Leaf node: A menu item without child nodes. An action or option that can be selected that will either trigger the action and dismiss the menu or appear selected with a checkmark.

  7. Truncation indicator: Ellipses indicating truncated text for longer names that don't fit in the node width.

Flyout menus

Use flyout menus when you want to expose sub-items from a parent node. PatternFly only supports a single-level flyout.

Example of a flyout menu.

If a menu item has sub-items, an angle right icon will be shown to the right of the item label. When hovering over the item, the secondary menu will be exposed.

Filtering

If the list of possible items is very long, add a filter to make items more findable.

Example of filtering menu items.

When filtering menu items, a search input will be added to the top of the menu and the list of items will be filtered as the user types.

Favoriting

When a user favorites an item, it will be duplicated and placed at the top of the menu. This can be useful for long lists of possible actions, where users might want to “pin” a subset of items for convenience.

Example of a menu with favorites.

Menu items can contain icons when the related action can be easily represented. For example, the favoriting action lets users interact with a star icon to mark an item as a favorite.

Drilldown menu

Use a drilldown menu when data is structured into levels and includes a long list of options. When the parent with children is selected, the list is replaced with the child items. A header displays the name of the parent, with the option to go back 1 level.

Example of a drilldown menu with a back button.

If data is more complex and has more than 2 levels, use a drilldown menu with breadcrumbs instead. Breadcrumbs offer better navigation between different levels. The number of visited levels is shown in a grey badge with a dropdown menu showing the menu items between the first and last level. The badge allows you to go back to a specific visited level. If you need to see the whole structure of your data, use a tree view instead.

Example of a drilldown menu with breadcrumbs.

Red text menu

If you have destructive items in a dropdown menu, you can optionally use danger text styling for that item (via the --pf-t--global--text--color--status--danger design tokens). A divider should be used to separate the destructive menu items from the non-destructive items. Danger text is used to visually distinguish a destructive action from other items.

When using danger text, you should still require a confirmation dialog before proceeding with a permanent destructive action.

Examples of menus with destructive red text.

Disabled menus and menu options

When to use

Menus or menu items can be disabled for multiple reasons. The reason an action is disabled informs which design pattern you should use.

Use a disabled menu when:

  • An action is unavailable due to an unmet prerequisite, condition, permission, or status.

    If a user needs to complete a prerequisite to enable an action, disable the action and add a tooltip. The tooltip should explain what the user needs to do to enable the action.

    Example of a menu with a disabled menu item.
    • Examples:
      • A user can’t perform bulk actions until they select resources in the list.
      • A user cannot view past logs until their container is finished restarting.
  • An action cannot be performed due to a product constraint or rule.

    If an action cannot be taken because of a product constraint or rule, hide the action.

    • Example: While a user can delete a resource they own, they cannot delete a template or default resource.

When not to use a disabled menu

Do not use a disabled menu when:

  • An action can be performed, but is not recommended.

    When an action can be performed but may result in an undesirable outcome, do not disable it. Instead, add a confirmation modal. When the user clicks on the action, use a modal to explain the potential consequences and ask the user if they are sure they want to proceed.

    • Example: A user wants to delete a system.

Content considerations

When creating menu item labels, keep in mind the following guidelines:

  • Keep menu items short. In most cases, 1-3 words should suffice.

  • Actions should start with a verb, for example: Save, Clear filters, and Remove from tasklist.

  • Options should reflect the result a user should expect. For example, a list or sorting options might include the items: Alphabetical, Oldest first, Newest first, and Numeric.

  • Descriptive text added to a menu item should be short. Two lines or less is recommended.