--- id: Dropdown section: components subsection: menus cssPrefix: pf-v5-c-dropdown deprecated: true ---import './Dropdown.css' ## Examples ### Expanded ```html
``` ### Collapsed ```html
``` ### Disabled ```html
``` ### Aria disabled items ```html
``` ### Kebab ```html
``` ### Kebab align right ```html
``` ### Align right ```html
``` ### Align on different breakpoint ```html
``` ### Align top ```html
``` ### Plain with text ```html
 
 
``` ### Badge toggle ```html
``` ### Menu item icons ```html
``` ### Split button (checkbox) ```html
``` ### Split button (checkbox with toggle text) ```html
``` ### Split button (progress checkbox) ```html
``` ### Split button (action) ```html
``` ### Split button, primary (action) ```html
``` ### Split button, secondary (action) ```html
``` ### With groups ```html
``` ### With groups and dividers between groups ```html
``` ### With groups and dividers between items ```html
``` ### Panel ```html
[Panel contents here]
``` The dropdown panel is provided for flexibility in allowing various content within a dropdown. ### Primary toggle ```html
``` ### Secondary toggle ```html
``` ### Dropdown with image and text ```html
``` ### Dropdown with description ```html
``` ## Documentation ### Overview The dropdown menu can contain either links or buttons, depending on the expected behavior when clicking the menu item. If you are using the menu item to navigate to another page, then menu item is a link. Otherwise, use a button for the menu item. ### Accessibility | Attribute | Applied | Outcome | | -- | -- | -- | | `aria-expanded="false"` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-check`, `.pf-v5-c-dropdown__toggle-button` | Indicates that the menu is hidden. | | `aria-expanded="true"` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-check`, `.pf-v5-c-dropdown__toggle-button` | Indicates that the menu is visible. | | `aria-label="Actions"` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-check`, `.pf-v5-c-dropdown__toggle-button` | Provides an accessible name for the dropdown when an icon is used instead of text. **Required when icon is used with no supporting text**. | | `aria-hidden="true"` | `.pf-v5-c-dropdown__toggle-icon`, ``, `.pf-v5-c-dropdown__toggle-check .pf-v5-c-dropdown__toggle-text` | Hides the icon from assistive technologies. | | `hidden` | `.pf-v5-c-dropdown__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. | | `aria-labelledby="{toggle button id}"` | `.pf-v5-c-dropdown__menu` | Gives the menu an accessible name by referring to the element that toggles the menu. | | `aria-labelledby="{checkbox id} {toggle text id}"` | `.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input[type="checkbox"]` | Gives the checkbox an accessible name by referring to the element by which it is described. | | `disabled` | `.pf-v5-c-dropdown__toggle`, `.pf-v5-c-dropdown__toggle-button`, `.pf-v5-c-dropdown__toggle-check > input[type="checkbox"]` | Disables the dropdown toggle and removes it from keyboard focus. | | `disabled` | `button.pf-v5-c-dropdown__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. | | `aria-disabled="true"` | `a.pf-v5-c-dropdown__menu-item` | When the menu item uses a link element, indicates that it is unavailable. | | `tabindex="-1"` | `a.pf-v5-c-dropdown__menu-item` | When the menu item uses a link element, removes it from keyboard focus. | ### Usage | Class | Applied | Outcome | | -- | -- | -- | | `.pf-v5-c-dropdown` | `
` | Defines the parent wrapper of the dropdown. | | `.pf-v5-c-dropdown__toggle` | `