Dropdown
Use a dropdown when you want to present a list of actions in a limited space.
ExamplesPropsCSS VariablesExamples
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | Anything which can be rendered in a dropdown | |
| className | string | No | Classes applied to root element of dropdown | |
| dropdownItems | any[] | No | Array of DropdownItem nodes that will be rendered in the dropdown Menu list | |
| isOpen | boolean | No | Flag to indicate if menu is opened | |
| isPlain | boolean | No | Display the toggle with no border or background | |
| position | DropdownPosition | 'right' | 'left' | No | Indicates where menu will be aligned horizontally | |
| direction | DropdownDirection | 'up' | 'down' | No | Display menu above or below dropdown toggle | |
| isGrouped | boolean | No | Flag to indicate if dropdown has groups | |
| toggle | React.ReactElement<any> | Yes | Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> | |
| onSelect | (event?: React.SyntheticEvent<HTMLDivElement>) => void | No | Function callback called when user selects item | |
| autoFocus | boolean | No | Flag to indicate if the first dropdown item should gain initial focus, set false when adding a specific auto-focus item (like a current selection) otherwise leave as true | |
| ouiaComponentType | string | No |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Checkboxes within group |
| className | string | No | '' | Additional classes added to the DropdownGroup control |
| label | React.ReactNode | No | '' | Group label |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | No | null | Anything which can be rendered as dropdown item |
| className | string | No | '' | Classes applied to root element of dropdown item |
| listItemClassName | string | No | Class to be applied to list item | |
| component | React.ReactNode | No | 'a' | A ReactElement to render, or a string to use as the component tag. Example: component={<Link to="/components/alert/">Alert</Link>} Example: component="button" |
| variant | 'item' | 'icon' | No | 'item' | Variant of the item. The 'icon' variant should use DropdownItemIcon to wrap contained icons or images. |
| isDisabled | boolean | No | false | Render dropdown item as disabled option |
| isPlainText | boolean | No | false | Render dropdown item as non-interactive item |
| isHovered | boolean | No | false | Forces display of the hover state of the element |
| href | string | No | Default hyperlink location | |
| tooltip | React.ReactNode | No | null | Tooltip to display when hovered over the item |
| tooltipProps | any | No | {} | Additional tooltip props forwarded to the Tooltip component |
| additionalChild | React.ReactNode | No | Additional node to include alongside item within the <li> | |
| customChild | React.ReactNode | No | Custom item rendering that receives the DropdownContext |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| id | string | No | '' | HTML ID of dropdown toggle |
| children | React.ReactNode | No | null | Anything which can be rendered as dropdown toggle button |
| className | string | No | '' | Classes applied to root element of dropdown toggle button |
| isOpen | boolean | No | false | Flag to indicate if menu is opened |
| onToggle | (isOpen: boolean) => void | No | (_isOpen: boolean) => undefined as any | Callback called when toggle is clicked |
| parentRef | HTMLElement | No | null | Element which wraps toggle |
| isActive | boolean | No | false | TODO: Use once core reimplements. Forces active state |
| isPlain | boolean | No | false | Display the toggle with no border or background |
| isDisabled | boolean | No | false | Whether or not the <div> has a disabled state |
| isPrimary | boolean | No | false | Whether or not the dropdown toggle button should have primary button styling |
| icon | React.ReactNode | No | null | An image to display within the dropdown toggle, appearing before any component children |
| toggleIndicator | React.ElementType | null | No | CaretDownIcon | The icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon. |
| splitButtonItems | React.ReactNode[] | No | Elements to display before the toggle button. When included, renders the toggle as a split button. | |
| splitButtonVariant | 'action' | 'checkbox' | No | 'checkbox' | Variant of split button toggle |
| aria-label | string | No | Accessible label for the dropdown toggle button | |
| aria-haspopup | boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree' | No | Accessibility property to indicate correct has popup | |
| type | 'button' | 'submit' | 'reset' | No | Type to put on the button | |
| onEnter | (event?: React.MouseEvent<HTMLButtonElement>) => void | No | Callback called when the Enter key is pressed |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the DropdownToggleCheckbox |
| isValid | boolean | No | true | Flag to show if the checkbox selection is valid or invalid |
| isDisabled | boolean | No | false | Flag to show if the checkbox is disabled |
| isChecked | boolean | null | No | Flag to show if the checkbox is checked | |
| checked | boolean | null | No | Alternate Flag to show if the checkbox is checked | |
| onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | No | () => undefined as any | A callback for when the checkbox selection changes |
| children | React.ReactNode | No | Element to be rendered inside the <span> | |
| id | string | Yes | Id of the checkbox | |
| aria-label | string | Yes | Aria-label of the checkbox |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional classes added to the DropdownToggleAction |
| isDisabled | boolean | No | false | Flag to show if the action button is disabled |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | No | () => {} | A callback for when the action button is clicked |
| children | React.ReactNode | No | Element to be rendered inside the <button> | |
| id | string | No | Id of the action button | |
| aria-label | string | No | Aria-label of the action button |
CSS Variables
| .pf-c-dropdown | --pf-c-dropdown__toggle--PaddingTop | 0.375rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--PaddingRight | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--PaddingBottom | 0.375rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--PaddingLeft | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--MinWidth | 44px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--FontSize | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--FontWeight | 400 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--Color | #151515 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--LineHeight | 1.5 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BackgroundColor | transparent | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderWidth | 1px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderTopColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderRightColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderBottomColor | #8a8d90 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--BorderLeftColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--hover--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--active--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--active--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--expanded--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--expanded--BorderBottomColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--disabled--BackgroundColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--BorderColor | transparent | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--Color | #6a6e73 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--hover--Color | #151515 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--disabled--Color | #d2d2d2 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--Color | #fff | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--BackgroundColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--active--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-button--Color | #151515 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--child--PaddingTop | 0.375rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--child--PaddingRight | 0.25rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--child--PaddingBottom | 0.375rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft | 0.25rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--child--BackgroundColor | transparent | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight | calc(-1 * 1px) | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button__toggle-check__input--Transform | translateY(-0.0625rem) | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-icon--MarginRight | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-icon--MarginLeft | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown--m-top--m-expanded__toggle-icon--Transform | rotate(180deg) | ||
| .pf-c-dropdown | --pf-c-dropdown__menu--BackgroundColor | #fff | ||
| .pf-c-dropdown | --pf-c-dropdown__menu--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-dropdown | --pf-c-dropdown__menu--PaddingTop | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu--PaddingBottom | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu--Top | calc(100% + 0.25rem) | ||
| .pf-c-dropdown | --pf-c-dropdown__menu--ZIndex | 200 | ||
| .pf-c-dropdown | --pf-c-dropdown--m-top__menu--Top | 0 | ||
| .pf-c-dropdown | --pf-c-dropdown--m-top__menu--Transform | translateY(calc(-100% - 0.25rem)) | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--BackgroundColor | transparent | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--PaddingTop | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--PaddingRight | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--PaddingBottom | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--PaddingLeft | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--FontSize | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--FontWeight | 400 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--LineHeight | 1.5 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--Color | #151515 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--hover--Color | #151515 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--disabled--Color | #6a6e73 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--disabled--BackgroundColor | transparent | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item--m-text--Color | #6a6e73 | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item-icon--MarginRight | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item-icon--Width | 1.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__menu-item-icon--Height | 1.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group--PaddingTop | 0 | ||
| .pf-c-dropdown | --pf-c-dropdown__group--group--PaddingTop | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group--first-child--PaddingTop | 0 | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--PaddingTop | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--PaddingRight | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--PaddingBottom | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--PaddingLeft | 1rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--FontSize | 0.875rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--FontWeight | 500 | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--Color | #6a6e73 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-image--MarginTop | 0.25rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-image--MarginBottom | 0.25rem | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-image--MarginRight | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown--c-divider--MarginTop | 0.5rem | ||
| .pf-c-dropdown | --pf-c-dropdown--c-divider--MarginBottom | 0.5rem | ||
| .pf-c-dropdown .pf-c-divider:last-child | --pf-c-dropdown--c-divider--MarginBottom | 0 | ||
| .pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain) | --pf-c-dropdown__toggle--BackgroundColor | #f0f0f0 | ||
| .pf-c-dropdown__toggle.pf-m-split-button > *:first-child | --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft | 0.5rem | ||
| .pf-c-dropdown__toggle.pf-m-split-button > *:last-child | --pf-c-dropdown__toggle--m-split-button--child--PaddingRight | 0.5rem | ||
| .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action | --pf-c-dropdown__toggle--m-split-button--child--PaddingRight | 0.5rem | ||
| .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action | --pf-c-dropdown__toggle--m-split-button--child--PaddingLeft | 0.5rem | ||
| .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-c-dropdown__toggle-button:last-child | --pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight | 0 | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):hover::before | --pf-c-dropdown__toggle--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):active::before | --pf-c-dropdown__toggle--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):focus::before | --pf-c-dropdown__toggle--BorderBottomColor | #06c | ||
| .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before | --pf-c-dropdown__toggle--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle.pf-m-plain:hover | --pf-c-dropdown__toggle--m-plain--Color | #151515 | ||
| .pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled | --pf-c-dropdown__toggle--m-plain--Color | #d2d2d2 | ||
| .pf-c-dropdown__toggle.pf-m-primary | --pf-c-dropdown__toggle--Color | #fff | ||
| .pf-c-dropdown__toggle.pf-m-primary | --pf-c-dropdown__toggle--BackgroundColor | #06c | ||
| .pf-c-dropdown__toggle.pf-m-primary:hover | --pf-c-dropdown__toggle--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle.pf-m-primary:active | --pf-c-dropdown__toggle--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle.pf-m-primary:focus | --pf-c-dropdown__toggle--BackgroundColor | #004080 | ||
| .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary | --pf-c-dropdown__toggle--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle-image:last-child | --pf-c-dropdown__toggle-image--MarginRight | 0 | ||
| .pf-c-dropdown.pf-m-top .pf-c-dropdown__menu | --pf-c-dropdown__menu--Top | 0 | ||
| .pf-c-dropdown__menu-item:hover | --pf-c-dropdown__menu-item--Color | #151515 | ||
| .pf-c-dropdown__menu-item:hover | --pf-c-dropdown__menu-item--BackgroundColor | #f0f0f0 | ||
| .pf-c-dropdown__menu-item:disabled | --pf-c-dropdown__menu-item--Color | #6a6e73 | ||
| .pf-c-dropdown__menu-item:disabled | --pf-c-dropdown__menu-item--BackgroundColor | transparent | ||
| .pf-c-dropdown__menu-item.pf-m-text | --pf-c-dropdown__menu-item--Color | #6a6e73 | ||
| .pf-c-dropdown__menu-item.pf-m-text:hover | --pf-c-dropdown__menu-item--BackgroundColor | transparent | ||
| .pf-c-dropdown__group:first-child | --pf-c-dropdown__group--PaddingTop | 0 | ||
| .pf-c-dropdown__group + .pf-c-dropdown__group | --pf-c-dropdown__group--PaddingTop | 0.5rem | ||
