@patternfly/patternfly/docs/components/Dropdown/deprecated/Dropdown.md

Assets, source, tooling, and content for PatternFly 4

---
id: Dropdown
section: components
subsection: menus
cssPrefix: pf-v5-c-dropdown
deprecated: true
---import './Dropdown.css'

## Examples

### Expanded

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-expanded-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Expanded dropdown</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-expanded-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Collapsed

```html
<div class="pf-v5-c-dropdown">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-collapsed-button"
    aria-expanded="false"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Collapsed dropdown</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-collapsed-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Disabled

```html
<div class="pf-v5-c-dropdown">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-disabled-button"
    aria-expanded="false"
    type="button"
    disabled
  >
    <span class="pf-v5-c-dropdown__toggle-text">Disabled dropdown</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-disabled-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Aria disabled items

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-aria-disabled-items-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Expanded dropdown</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-aria-disabled-items-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-aria-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-aria-disabled"
        role="menuitem"
        type="button"
        aria-disabled="true"
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Kebab

```html
<div class="pf-v5-c-dropdown">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain"
    id="dropdown-kebab-disabled-button"
    aria-expanded="false"
    type="button"
    disabled
    aria-label="Actions"
  >
    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-kebab-disabled-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain"
    id="dropdown-kebab-button"
    aria-expanded="false"
    type="button"
    aria-label="Actions"
  >
    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-kebab-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain"
    id="dropdown-kebab-expanded-button"
    aria-expanded="true"
    type="button"
    aria-label="Actions"
  >
    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-kebab-expanded-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Kebab align right

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain"
    id="dropdown-kebab-align-right-button"
    aria-expanded="true"
    type="button"
    aria-label="Actions"
  >
    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu pf-m-align-right"
    aria-labelledby="dropdown-kebab-align-right-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Align right

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-align-right-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Right</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu pf-m-align-right"
    aria-labelledby="dropdown-align-right-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Align on different breakpoint

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-align-on-different-breakpoint-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Dropdown</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu pf-m-align-right-on-lg pf-m-align-left-on-2xl"
    aria-labelledby="dropdown-align-on-different-breakpoint-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Align top

```html
<div class="pf-v5-c-dropdown pf-m-top">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-align-top-button"
    aria-expanded="false"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Top</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-align-top-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded pf-m-top">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-align-top-expanded-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Top</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-align-top-expanded-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Plain with text

```html
<div class="pf-v5-c-dropdown">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain pf-m-text"
    id="plain-with-text-example-disabled-button"
    aria-expanded="false"
    type="button"
    disabled
  >
    <span class="pf-v5-c-dropdown__toggle-text">Custom text</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="plain-with-text-example-disabled-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>&nbsp;
<div class="pf-v5-c-dropdown">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain pf-m-text"
    id="plain-with-text-example-button"
    aria-expanded="false"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Custom text</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="plain-with-text-example-button"
    hidden
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>&nbsp;
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain pf-m-text"
    id="plain-with-text-example-expanded-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Custom text (expanded)</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="plain-with-text-example-expanded-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Action</button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Badge toggle

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle pf-m-plain"
    id="dropdown-badge-toggle-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-badge pf-m-read">
      5
      <span class="pf-v5-c-dropdown__toggle-icon">
        <i class="fas fa-caret-down" aria-hidden="true"></i>
      </span>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-badge-toggle-button"
    role="menu"
  >
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Edit</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Deployment</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Application</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Count</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Application 1</button>
    </li>
  </ul>
</div>

```

### Menu item icons

```html
<div class="pf-v5-c-dropdown pf-m-expanded">
  <button
    class="pf-v5-c-dropdown__toggle"
    id="dropdown-menu-item-icons-button"
    aria-expanded="true"
    type="button"
  >
    <span class="pf-v5-c-dropdown__toggle-text">Expanded dropdown</span>
    <span class="pf-v5-c-dropdown__toggle-icon">
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </span>
  </button>
  <ul
    class="pf-v5-c-dropdown__menu"
    aria-labelledby="dropdown-menu-item-icons-button"
    role="menu"
  >
    <li role="none">
      <a class="pf-v5-c-dropdown__menu-item pf-m-icon" role="menuitem" href="#">
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
        </span>
        Link
      </a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-cog" aria-hidden="true"></i>
        </span>
        Action
      </button>
    </li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item pf-m-disabled"
        role="menuitem"
        href="#"
        aria-disabled="true"
        tabindex="-1"
      >Disabled link</a>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li class="pf-v5-c-divider" role="separator"></li>
    <li role="none">
      <a
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        href="#"
      >Separated link</a>
    </li>
  </ul>
</div>

```

### Split button (checkbox)

```html
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-disabled pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check"
      for="dropdown-split-button-disabled-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          disabled
          id="dropdown-split-button-disabled-toggle-check"
          aria-label="Select all"
        />
      </div>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-disabled-toggle-button"
      aria-label="Dropdown toggle"
      disabled
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check"
      for="dropdown-split-button-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          id="dropdown-split-button-toggle-check"
          aria-label="Select all"
        />
      </div>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check"
      for="dropdown-split-button-expanded-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          id="dropdown-split-button-expanded-toggle-check"
          aria-label="Select all"
        />
      </div>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="true"
      id="dropdown-split-button-expanded-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>

```

### Split button (checkbox with toggle text)

```html
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check"
      for="dropdown-split-button-text-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          checked
          id="dropdown-split-button-text-toggle-check"
          aria-label="Select all"
          aria-labelledby="dropdown-split-button-text-toggle-check dropdown-split-button-text-toggle-check-text"
        />
      </div>
      <span
        class="pf-v5-c-dropdown__toggle-text"
        aria-hidden="true"
        id="dropdown-split-button-text-toggle-check-text"
      >10 selected</span>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-text-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Select all</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Select none</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>

```

### Split button (progress checkbox)

```html
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check"
      for="dropdown-split-button-progress-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          id="dropdown-split-button-progress-toggle-check"
          aria-label="Select all"
        />
      </div>
      <span class="pf-v5-c-dropdown__toggle-progress">
        <svg class="pf-v5-c-spinner" role="progressbar" viewBox="0 0 100 100">
          <circle
            class="pf-v5-c-spinner__path"
            cx="50"
            cy="50"
            r="45"
            fill="none"
          />
        </svg>
      </span>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-progress-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check pf-m-in-progress"
      for="dropdown-split-button-in-progress-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          disabled
          id="dropdown-split-button-in-progress-toggle-check"
          aria-label="Select all"
        />
      </div>
      <span class="pf-v5-c-dropdown__toggle-progress">
        <svg class="pf-v5-c-spinner" role="progressbar" viewBox="0 0 100 100">
          <circle
            class="pf-v5-c-spinner__path"
            cx="50"
            cy="50"
            r="45"
            fill="none"
          />
        </svg>
      </span>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-in-progress-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check"
      for="dropdown-split-button-progress-text-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          checked
          id="dropdown-split-button-progress-text-toggle-check"
          aria-label="Select all"
          aria-labelledby="dropdown-split-button-progress-text-toggle-check dropdown-split-button-progress-text-toggle-check-text"
        />
      </div>
      <span class="pf-v5-c-dropdown__toggle-progress">
        <svg class="pf-v5-c-spinner" role="progressbar" viewBox="0 0 100 100">
          <circle
            class="pf-v5-c-spinner__path"
            cx="50"
            cy="50"
            r="45"
            fill="none"
          />
        </svg>
      </span>
      <span
        class="pf-v5-c-dropdown__toggle-text"
        aria-hidden="true"
        id="dropdown-split-button-progress-text-toggle-check-text"
      >10 selected</span>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-progress-text-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Select all</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Select none</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button">
    <label
      class="pf-v5-c-dropdown__toggle-check pf-m-in-progress"
      for="dropdown-split-button-in-progress-text-toggle-check"
    >
      <div class="pf-v5-c-check pf-m-standalone">
        <input
          class="pf-v5-c-check__input"
          type="checkbox"
          checked
          disabled
          id="dropdown-split-button-in-progress-text-toggle-check"
          aria-label="Select all"
          aria-labelledby="dropdown-split-button-in-progress-text-toggle-check dropdown-split-button-in-progress-text-toggle-check-text"
        />
      </div>
      <span class="pf-v5-c-dropdown__toggle-progress">
        <svg class="pf-v5-c-spinner" role="progressbar" viewBox="0 0 100 100">
          <circle
            class="pf-v5-c-spinner__path"
            cx="50"
            cy="50"
            r="45"
            fill="none"
          />
        </svg>
      </span>
      <span
        class="pf-v5-c-dropdown__toggle-text"
        aria-hidden="true"
        id="dropdown-split-button-in-progress-text-toggle-check-text"
      >10 selected</span>
    </label>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-in-progress-text-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Select all</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Select none</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>

```

### Split button (action)

```html
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button pf-m-action">
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Dropdown toggle"
    >Action</button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-action-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button pf-m-action">
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Dropdown toggle"
    >Action</button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="true"
      id="dropdown-split-button-action-expanded-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button pf-m-action">
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Settings"
    >
      <i class="fas fa-cog" aria-hidden="true"></i>
    </button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-action-icon-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <div class="pf-v5-c-dropdown__toggle pf-m-split-button pf-m-action">
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Settings"
    >
      <i class="fas fa-cog" aria-hidden="true"></i>
    </button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="true"
      id="dropdown-split-button-action-icon-expanded-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-cog" aria-hidden="true"></i>
        </span>
        Actions
      </button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
        disabled
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-bell" aria-hidden="true"></i>
        </span>
        Disabled action
      </button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-cubes" aria-hidden="true"></i>
        </span>
        Other action
      </button>
    </li>
  </ul>
</div>

```

### Split button, primary (action)

```html
<div class="pf-v5-c-dropdown">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Dropdown toggle"
    >Action</button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-action-primary-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Dropdown toggle"
    >Action</button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="true"
      id="dropdown-split-button-action-primary-expanded-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Settings"
    >
      <i class="fas fa-cog" aria-hidden="true"></i>
    </button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-action-primary-icon-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-primary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Settings"
    >
      <i class="fas fa-cog" aria-hidden="true"></i>
    </button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="true"
      id="dropdown-split-button-action-primary-icon-expanded-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-cog" aria-hidden="true"></i>
        </span>
        Actions
      </button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
        disabled
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-bell" aria-hidden="true"></i>
        </span>
        Disabled action
      </button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item pf-m-icon"
        role="menuitem"
        type="button"
      >
        <span class="pf-v5-c-dropdown__menu-item-icon">
          <i class="fas fa-cubes" aria-hidden="true"></i>
        </span>
        Other action
      </button>
    </li>
  </ul>
</div>

```

### Split button, secondary (action)

```html
<div class="pf-v5-c-dropdown">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Dropdown toggle"
    >Action</button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="false"
      id="dropdown-split-button-action-secondary-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" hidden role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown pf-m-expanded">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-label="Dropdown toggle"
    >Action</button>

    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria-expanded="true"
      id="dropdown-split-button-action-secondary-expanded-toggle-button"
      aria-label="Dropdown toggle"
    >
      <i class="fas fa-caret-down" aria-hidden="true"></i>
    </button>
  </div>
  <ul class="pf-v5-c-dropdown__menu" role="menu">
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Actions</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
        disabled
      >Disabled action</button>
    </li>
    <li role="none">
      <button
        class="pf-v5-c-dropdown__menu-item"
        role="menuitem"
        type="button"
      >Other action</button>
    </li>
  </ul>
</div>
<div class="pf-v5-c-dropdown">
  <div
    class="pf-v5-c-dropdown__toggle pf-m-secondary pf-m-split-button pf-m-action"
  >
    <button
      class="pf-v5-c-dropdown__toggle-button"
      type="button"
      aria