import './Menu.css'

## Examples

### Basic


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Danger menu item


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### With icons


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### With checkbox


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Scrollable


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Scrollable with custom menu height


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### With flyout


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### With flyout menu top


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### With flyout menu left


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

### With flyout menu left top


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Drilldown


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Drilldown level two


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Drilldown level three


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Drilldown level four


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Scrollable drilldown


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Width modified drilldown


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Drilldown with breadcrumbs - level 1


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

### Drilldown with breadcrumbs - level 2


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Drilldown with breadcrumbs - level 3


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

### Drilldown with breadcrumbs - level 4


import Example20 from './Example20.html?raw'

<LiveExample html={Example20} />

{/*
### Drilldown managed height
```hbs
{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 216px;"'}}
```

### Drilldown managed height level two
```hbs
{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-2" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 193px;"'}}
```

### Drilldown managed height level three
```hbs
{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-3" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 233px;"'}}
```

### Drilldown managed height level four
```hbs
{{> menu--Drilldown menu--Drilldown--id="drilldown-managed-height-level-4" menu--Drilldown--IsDrilledIn--list-1="true" menu--Drilldown--IsDrilledIn--list-2="true" menu--Drilldown--IsDrilledIn--list-3="true" menu--Drilldown--menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 216px;"'}}
```

### Drilldown with breadcrumbs and managed height - level 4
```hbs
{{#> menu menu--id="drilldown-with-breadcrumbs-and-managed-height-level-4" menu--modifier="pf-m-drilldown pf-m-drilled-in" menu--attribute='style="--pf-v6-c-menu--MaxHeight: 120px; --pf-v6-c-menu__content--Height: 216px;"'}}
  {{> menu-breadcrumbs--Drilldown breadcrumb--id="drilldown-with-breadcrumbs-level-4" menu-breadcrumbs--Drilldown--IsLevel4="true"}}
  {{> menu-content--Breadcrumbs menu-content--Breadcrumbs--level2="true" menu-content--Breadcrumbs--level3="true" menu-content--Breadcrumbs--level4="true"}}
{{/menu}}
```
*/}

### Scrollable menu with header and footer


import Example21 from './Example21.html?raw'

<LiveExample html={Example21} />

### Scrollable menu with search and footer


import Example22 from './Example22.html?raw'

<LiveExample html={Example22} />

### With filtering


import Example23 from './Example23.html?raw'

<LiveExample html={Example23} />

### With links


import Example24 from './Example24.html?raw'

<LiveExample html={Example24} />

### With separator(s)


import Example25 from './Example25.html?raw'

<LiveExample html={Example25} />

### With titled groups


import Example26 from './Example26.html?raw'

<LiveExample html={Example26} />

### With description


import Example27 from './Example27.html?raw'

<LiveExample html={Example27} />

### With actions


import Example28 from './Example28.html?raw'

<LiveExample html={Example28} />

### With favorites


import Example29 from './Example29.html?raw'

<LiveExample html={Example29} />

### Option single select


import Example30 from './Example30.html?raw'

<LiveExample html={Example30} />

### Option multi-select


import Example31 from './Example31.html?raw'

<LiveExample html={Example31} />

### View more


import Example32 from './Example32.html?raw'

<LiveExample html={Example32} />

### Loading


import Example33 from './Example33.html?raw'

<LiveExample html={Example33} />

### Footer


import Example34 from './Example34.html?raw'

<LiveExample html={Example34} />

### Plain


import Example35 from './Example35.html?raw'

<LiveExample html={Example35} />

### Plain with search and footer


import Example36 from './Example36.html?raw'

<LiveExample html={Example36} />

### Plain scrollable with search and footer


import Example37 from './Example37.html?raw'

<LiveExample html={Example37} />

## 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` | `<div>` | Initiates the menu. **Required** |
| `.pf-v6-c-menu__header` | `<div>` | Initiates the menu header container. |
| `.pf-v6-c-menu__search` | `<div>` | Initiates the menu search container. Use for filtering. |
| `.pf-v6-c-menu__search-input` | `<div>` | Initiates the menu search input container. |
| `.pf-v6-c-menu__content` | `<div>` | Initiates the menu content. Use for lists. **Required** |
| `.pf-v6-c-menu__list` | `<ul>` | Initiates the menu list. **Required** |
| `.pf-v6-c-menu__list-item` | `<li>` | Initiates the menu list item. **Required** |
| `.pf-v6-c-menu__item` | `<button>`, `<a>`, `<div>`, `<label>` | Initiates the menu item. **Required** |
| `.pf-v6-c-menu__item-main` | `<span>` | Initiates the menu item main container. **Required** |
| `.pf-v6-c-menu__item-text` | `<span>` | Initiates the menu item text. **Required** |
| `.pf-v6-c-menu__item-check` | `<span>` | Initiates a menu label. |
| `.pf-v6-c-menu__item-description` | `<span>` | Initiates the menu item description. |
| `.pf-v6-c-menu__item-group` | `<section>` | Initiates the menu item group. |
| `.pf-v6-c-menu__item-group-title` | `<h1>` | Initiates the menu item group title. |
| `.pf-v6-c-menu__item-icon` | `<span>` | Initiates the menu item icon. |
| `.pf-v6-c-menu__item-toggle-icon` | `<span>` | Initiates the menu item toggle icon. |
| `.pf-v6-c-menu__item-select-icon` | `<span>` | Initiates the menu item select icon. |
| `.pf-v6-c-menu__item-action` | `<button>` | Initiates the menu item action. |
| `.pf-v6-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
| `.pf-v6-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
| `.pf-v6-c-menu__footer` | `<div>` | Initiates the menu footer. |
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |
| `.pf-m-favorite` | `.pf-v6-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
| `.pf-m-favorited` | `.pf-v6-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
| `.pf-m-selected` | `.pf-v6-c-menu__item` | Modifies the menu item to be selected. |
| `.pf-m-drill-up` | `.pf-v6-c-menu__list-item` | Flags the menu item as a drill up button. |
| `.pf-m-flyout` | `.pf-v6-c-menu` | Modifies the menu so that all nested `.pf-v6-c-menu` elements "flyout". |
| `.pf-m-nav` | `.pf-v6-c-menu` | Modifies the menu for nav variant. |
| `.pf-m-top` | `.pf-v6-c-menu` | Modifies a flyout menu to expand to the top. |
| `.pf-m-left` | `.pf-v6-c-menu` | Modifies a flyout menu to expand to the left. |
| `.pf-m-plain` | `.pf-v6-c-menu` | Modifies the menu component for use in the page instead of as a dropdown. |
| `.pf-m-scrollable` | `.pf-v6-c-menu` | Modifies the menu component content for scrollable styles. Scrollable content height can be customized by setting `--pf-v6-c-menu__content--MaxHeight`. |
| `.pf-m-current` | `.pf-v6-c-menu__list-item` | Modifies a list item for current styles. |
| `.pf-m-load` | `.pf-v6-c-menu__list-item` | Modifies a list item for "load more" styles. |
| `.pf-m-loading` | `.pf-v6-c-menu__list-item` | Modifies a list item for loading styles. |
| `.pf-m-disabled` | `.pf-v6-c-menu__item` | Modifies a list item for disabled styling. |
| `.pf-m-aria-disabled` | `.pf-v6-c-menu__item` | Modifies a list item for aria-disabled styling. |
| `.pf-m-drilldown` | `.pf-v6-c-menu` | Modifies the menu so that all nested `.pf-v6-c-menu` elements "drill down". |
| `.pf-m-current-path` | `.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item` | Modifies the menu list item for current path state. |
| `.pf-m-drilled-in` | `.pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu` | Modifies the menu list for drilled in state. |
| `.pf-m-static` | `.pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu` | Modifies the menu list for drilled static state. |
| `.pf-m-danger` | `.pf-v6-c-menu__item-text` | Modifies a list item for danger styles. |
| `--pf-v6-c-menu--Width: {width}` | `.pf-v6-c-menu` | Modifies the width of the menu. The default value is `auto`. |
| `--pf-v6-c-menu__content--MaxHeight: {height}` | `.pf-v6-c-menu__content` | Modifies the height of the menu content. Update this value when header and/or footer elements are intended to be fixed. |
| `--pf-v6-c-menu__content--Height: {height}` | `.pf-v6-c-menu` | Modifies the height of the drilldown menu content. The default value is `auto`. |
| `--pf-v6-c-menu--m-flyout__menu--top-offset` | `.pf-v6-c-menu` | Modifies the menu to allow for an offset to the top positioning. |
| `--pf-v6-c-menu--m-flyout__menu--left-offset` | `.pf-v6-c-menu` | Modifies the menu to allow for an offset to the left positioning. |
| `--pf-v6-c-menu--m-flyout__menu--m-left--right-offset` | `.pf-v6-c-menu.pf-m-flyout > .pf-v6-c-menu` | Modifies the menu to allow for an offset to the right positioning. |