Menu dropdown

The menu dropdown is composed of a toggle, which opens a container with menu items. Menu items are versatile, with optional icons, descriptions, and organizational elements like group headings and separators.

Menu dropdowns, including the different types of toggles, are available for both light and dark schemes.

The element that triggers the menu can be displayed in two ways. The basic toggle is a standard, button-style trigger that includes both text (the toggle label) and a caret icon. The basic toggle can be the same width as the menu dropdown or shrink to fit its text.

The other option is to use a compact toggle, which omits a text label and displays only the ellipsis-vertical-fill icon. This dropdown toggle is available with or without a border. A compact toggle requires a descriptive aria-label to communicate its purpose to screen readers.

Menu items are ideally actions. Those are shown in --rh-color-text-primary in the default state.

Some menu items may need to be links. In their default states, links will always use --rh-color-interactive-primary-default and show a dashed underline. If a menu item is a link that opens in a new window or tab, an external link icon is added automatically and aligned to the right.

View guidelines for using menu item types

Menu items can include an icon and a description.

Space values all viewport sizes. The image below shows the spacing for a basic menu toggle and the container for menu item groups.

The image below shows spacing within a menu item that functions as a group heading and a menu item that includes all of the slots.

A compact menu toggle’s height matches the height of a menu toggle with text, so spacing does not factor as much in its sizing.

The images below show interaction states for both the menu toggle and menu items when the dropdown is expanded. When a menu dropdown is expanded, focus moves to the first menu item, and this state is reflected in all of the images.