@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,329 lines (1,294 loc) • 266 kB
Markdown
---
id: Menu
section: components
subsection: menus
cssPrefix: pf-v6-c-menu
---import './Menu.css'
## Examples
### Basic
```html
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Action</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<a class="pf-v6-c-menu__item" href="#" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Link</span>
</span>
</a>
</li>
<li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
disabled
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Disabled action</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item pf-m-disabled" role="none">
<a
class="pf-v6-c-menu__item"
href="#"
aria-disabled="true"
tabindex="-1"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Disabled link</span>
</span>
</a>
</li>
<li class="pf-v6-c-menu__list-item pf-m-aria-disabled" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
aria-disabled="true"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Aria-disabled action</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item pf-m-aria-disabled" role="none">
<a
class="pf-v6-c-menu__item"
href="#"
aria-disabled="true"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Aria-disabled link</span>
</span>
</a>
</li>
</ul>
</div>
</div>
```
### Danger menu item
```html
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Action 1</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Action 2</span>
</span>
</button>
</li>
<li class="pf-v6-c-divider" role="separator"></li>
<li class="pf-v6-c-menu__list-item pf-m-danger" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-screen-reader">Danger Item:</span>
<span class="pf-v6-c-menu__item-text">Delete</span>
</span>
</button>
</li>
</ul>
</div>
</div>
```
### With icons
```html
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-icon">
<i class="fas fa-fw fa-code-branch" aria-hidden="true"></i>
</span>
<span class="pf-v6-c-menu__item-text">From Git</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-icon">
<i class="fas fa-fw fa-layer-group" aria-hidden="true"></i>
</span>
<span class="pf-v6-c-menu__item-text">Container image</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-icon">
<i class="fas fa-fw fa-cube" aria-hidden="true"></i>
</span>
<span class="pf-v6-c-menu__item-text">From DockerFile</span>
</span>
</button>
</li>
</ul>
</div>
</div>
```
### With checkbox
```html
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="menuitem">
<label
class="pf-v6-c-menu__item"
for="with-checkbox-example-check-1-input"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="with-checkbox-example-check-1-input"
name="with-checkbox-example-check-1-input"
aria-label="Standalone check"
/>
</div>
</span>
<span class="pf-v6-c-menu__item-text">Checkbox 1</span>
</span>
</label>
</li>
<li class="pf-v6-c-menu__list-item" role="menuitem">
<label
class="pf-v6-c-menu__item"
for="with-checkbox-example-check-2-input"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="with-checkbox-example-check-2-input"
name="with-checkbox-example-check-2-input"
aria-label="Standalone check"
/>
</div>
</span>
<span class="pf-v6-c-menu__item-text">Checkbox 2</span>
</span>
</label>
</li>
<li class="pf-v6-c-menu__list-item pf-m-disabled" role="menuitem">
<label
class="pf-v6-c-menu__item"
for="with-checkbox-example-check-3-input"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-check">
<div class="pf-v6-c-check pf-m-standalone">
<input
class="pf-v6-c-check__input"
type="checkbox"
id="with-checkbox-example-check-3-input"
name="with-checkbox-example-check-3-input"
aria-label="Standalone check"
disabled
/>
</div>
</span>
<span class="pf-v6-c-menu__item-text">Checkbox 3</span>
</span>
</label>
</li>
</ul>
</div>
</div>
```
### Scrollable
```html
<div class="pf-v6-c-menu pf-m-scrollable">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 1</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 2</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 3</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 4</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 5</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 6</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 7</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 8</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 9</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 10</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 11</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 12</span>
</button>
</li>
</ul>
</div>
</div>
```
### Scrollable with custom menu height
```html
<div
class="pf-v6-c-menu pf-m-scrollable"
style="--pf-v6-c-menu__content--MaxHeight: 200px;"
>
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 1</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 2</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 3</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 4</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 5</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 6</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 7</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 8</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 9</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 10</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 11</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-text">Action 12</span>
</button>
</li>
</ul>
</div>
</div>
```
### With flyout
```html
<div class="pf-v6-c-menu pf-m-flyout">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Start rollout</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Pause rollouts</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Add storage</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu" hidden>
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="true"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Edit</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
<span class="pf-v6-c-menu__item-description">Description</span>
</button>
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Delete deployment config</span>
</span>
</button>
</li>
</ul>
</div>
</div>
```
### With flyout menu top
```html
<div class="pf-v6-c-menu pf-m-flyout">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Start rollout</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Pause rollouts</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Add storage</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu" hidden>
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="true"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Edit</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
<span class="pf-v6-c-menu__item-description">Description</span>
</button>
<div class="pf-v6-c-menu pf-m-top">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Delete deployment config</span>
</span>
</button>
</li>
</ul>
</div>
</div>
```
### With flyout menu left
```html
<div class="pf-v6-c-menu pf-m-flyout">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Start rollout</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Pause rollouts</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Add storage</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu" hidden>
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="true"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Edit</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
<span class="pf-v6-c-menu__item-description">Description</span>
</button>
<div class="pf-v6-c-menu pf-m-left">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Delete deployment config</span>
</span>
</button>
</li>
</ul>
</div>
</div>
```
### With flyout menu left top
```html
<div class="pf-v6-c-menu pf-m-flyout">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Start rollout</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Pause rollouts</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Add storage</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu" hidden>
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="true"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Edit</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
<span class="pf-v6-c-menu__item-description">Description</span>
</button>
<div class="pf-v6-c-menu pf-m-left pf-m-top">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Application grouping</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Count</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Labels</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Annotations</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Delete deployment config</span>
</span>
</button>
</li>
</ul>
</div>
</div>
```
### Drilldown
```html
<div class="pf-v6-c-menu pf-m-drilldown">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Start rollout</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Pause rollout</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button class="pf-v6-c-menu__item" type="button" role="menuitem">
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Add storage</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Edit</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li class="pf-v6-c-menu__list-item pf-m-drill-up" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
tabindex="0"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-left"></i>
</span>
<span class="pf-v6-c-menu__item-text">Edit</span>
</span>
</button>
</li>
<li class="pf-v6-c-divider" role="separator"></li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Deployment</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li
class="pf-v6-c-menu__list-item pf-m-drill-up"
role="none"
>
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
tabindex="0"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-left"></i>
</span>
<span class="pf-v6-c-menu__item-text">Deployment</span>
</span>
</button>
</li>
<li class="pf-v6-c-divider" role="separator"></li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Routes</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Nodes</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">URLs</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span
class="pf-v6-c-menu__item-text"
>Advanced settings</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li
class="pf-v6-c-menu__list-item pf-m-drill-up"
role="none"
>
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
tabindex="0"
>
<span class="pf-v6-c-menu__item-main">
<span
class="pf-v6-c-menu__item-toggle-icon"
>
<i class="fas fa-angle-left"></i>
</span>
<span
class="pf-v6-c-menu__item-text"
>Advanced settings</span>
</span>
</button>
</li>
<li class="pf-v6-c-divider" role="separator"></li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span
class="pf-v6-c-menu__item-text"
>Reports</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span
class="pf-v6-c-menu__item-text"
>Policies</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span
class="pf-v6-c-menu__item-text"
>Systems</span>
</span>
</button>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
aria-expanded="false"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">RBAC</span>
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-right"></i>
</span>
</span>
</button>
<div class="pf-v6-c-menu">
<div class="pf-v6-c-menu__content">
<ul class="pf-v6-c-menu__list" role="menu">
<li
class="pf-v6-c-menu__list-item pf-m-drill-up"
role="none"
>
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-toggle-icon">
<i class="fas fa-angle-left"></i>
</span>
<span class="pf-v6-c-menu__item-text">RBAC</span>
</span>
</button>
</li>
<li class="pf-v6-c-divider" role="separator"></li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Reports</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Policies</span>
</span>
</button>
</li>
<li class="pf-v6-c-menu__list-item" role="none">
<button
class="pf-v6-c-menu__item"
type="button"
role="menuitem"
>
<span class="pf-v6-c-menu__item-main">
<span class="pf-v6-c-menu__item-text">Systems</span>
</span>
</button>
</li>
</ul>