--- id: Menu section: components subsection: menus cssPrefix: pf-v6-c-menu ---import './Menu.css' ## Examples ### Basic ```html
``` ### Danger menu item ```html
``` ### With icons ```html
``` ### With checkbox ```html
``` ### Scrollable ```html
``` ### Scrollable with custom menu height ```html
``` ### With flyout ```html
``` ### With flyout menu top ```html
``` ### With flyout menu left ```html
``` ### With flyout menu left top ```html
``` ### Drilldown ```html
``` ### Drilldown level two ```html
``` ### Drilldown level three ```html
``` ### Drilldown level four ```html
``` ### Scrollable drilldown ```html
``` ### Width modified drilldown ```html
``` ### Drilldown with breadcrumbs - level 1 ```html
``` ### Drilldown with breadcrumbs - level 2 ```html
``` ### Drilldown with breadcrumbs - level 3 ```html
``` ### Drilldown with breadcrumbs - level 4 ```html
``` ### Scrollable menu with header and footer ```html
Header
``` ### Scrollable menu with search and footer ```html
``` ### With filtering ```html
``` ### With links ```html
``` ### With separator(s) ```html
``` ### With titled groups ```html

Group 1

Group 2

``` ### With description ```html
``` ### With actions ```html

Actions

``` ### With favorites ```html

Favorites

All actions

``` ### Option single select ```html
``` ### Option multi-select ```html
``` ### View more ```html
``` ### Loading ```html
``` ### Footer ```html
``` ### Plain ```html
``` ### Plain with search and footer ```html
``` ### Plain scrollable with search and footer ```html
``` ## Documentation ### Accessibility | Attribute | Applied | Outcome | | -- | -- | -- | | `role="menu"` | `.pf-v6-c-menu__list` | Declares `.pf-v6-c-menu__list` as a menu. | | `disabled` | `button.pf-v6-c-menu__item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. | | `role="menuitem"` | `.pf-v6-c-menu__item`, `.pf-v6-c-menu__list-item` (checkbox) | Assigns `.pf-v6-c-menu__item` as an option in a set of choices contained by a menu. | | `role="none"` | `.pf-v6-c-menu__list-item` | Removes semantic meaning from `.pf-v6-c-menu__list-item`. | | `aria-disabled="true"` | `.pf-v6-c-menu__item` | Indicates to assistive technologies that the menu item is disabled, but still allows it to be focusable via keyboard. Additional click prevention may be required. | | `tabindex="-1"` | `a.pf-v6-c-menu__item` | When the menu item uses a link element and has `aria-disabled="true"` passed in, removes it from keyboard focus. This is similar to passing `disabled` to a menu item that uses a button element. | | `aria-hidden="true"` | `.pf-v6-c-menu__item-icon`, `.pf-v6-c-menu__item-action-icon`, `.pf-v6-c-menu__item-external-icon`, `.pf-v6-c-menu__item-toggle-icon`, `.pf-v6-c-menu__item-select-icon` | Hides the icon from assistive technologies. | | `aria-label="Descriptive text"` | `.pf-v6-c-menu__item-action-icon` | There should always be descriptive text on an action icon because there is no visible descriptive text labelling the icon. | | `aria-label="Not starred"` | `.pf-v6-c-menu__item-action-icon.pf-m-favorite` | Provides an accessible label indicating that the favorite action is not selected. | | `aria-label="Starred"` | `.pf-v6-c-menu__item-action-icon.pf-m-favorite.pf-m-favorited` | Provides an accessible label indicating that the favorite action is selected. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-menu` | `
` | Initiates the menu. **Required** | | `.pf-v6-c-menu__header` | `
` | Initiates the menu header container. | | `.pf-v6-c-menu__search` | `
` | Initiates the menu search container. Use for filtering. | | `.pf-v6-c-menu__search-input` | `
` | Initiates the menu search input container. | | `.pf-v6-c-menu__content` | `
` | Initiates the menu content. Use for lists. **Required** | | `.pf-v6-c-menu__list` | `