Examples
Props
Dropdown
| Name | Type | Default | Description |
|---|---|---|---|
| togglerequired | React.ReactElement<any> | Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox> | |
| alignments | { sm?: 'right' | 'left'; md?: 'right' | 'left'; lg?: 'right' | 'left'; xl?: 'right' | 'left'; '2xl'?: 'right' | 'left'; } | Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property. | |
| autoFocus | boolean | 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 | |
| children | React.ReactNode | Anything which can be rendered in a dropdown | |
| className | string | Classes applied to root element of dropdown | |
| contextProps | DropdownContext | Props for extreme customization of dropdown | |
| direction | DropdownDirection | 'up' | 'down' | Display menu above or below dropdown toggle | |
| dropdownItems | any[] | Array of DropdownItem nodes that will be rendered in the dropdown Menu list | |
| isFullHeight | boolean | Flag indicating that the dropdown should expand to full height | |
| isGrouped | boolean | Flag to indicate if dropdown has groups | |
| isOpen | boolean | Flag to indicate if menu is opened | |
| isPlain | boolean | Display the toggle with no border or background | |
| onSelect | (event?: React.SyntheticEvent<HTMLDivElement>) => void | Function callback called when user selects item | |
| position | DropdownPosition | 'right' | 'left' | Indicates where menu will be aligned horizontally |
DropdownGroup
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | null | Checkboxes within group |
| className | string | '' | Additional classes added to the DropdownGroup control |
| label | React.ReactNode | '' | Group label |
DropdownItem
| Name | Type | Default | Description |
|---|---|---|---|
| additionalChild | React.ReactNode | Additional node to include alongside item within the <li> | |
| autoFocus | boolean | Initial focus on the item when the menu is opened (Note: Only applicable to one of the items) | |
| children | React.ReactNode | Anything which can be rendered as dropdown item | |
| className | string | Classes applied to root element of dropdown item | |
| component | React.ReactNode | '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" If React.isValidElement(component) the className prop will be injected unless styleChildren="false" |
| componentID | string | ID for the component element | |
| customChild | React.ReactNode | Custom item rendering that receives the DropdownContext | |
| description | React.ReactNode | null | A short description of the dropdown item, displayed under the dropdown item content |
| href | string | Default hyperlink location | |
| icon | React.ReactNode | null | An image to display within the DropdownItem, appearing before any component children |
| isAriaDisabled | boolean | false | Render dropdown item as aria-disabled option |
| isDisabled | boolean | false | Render dropdown item as disabled option |
| isHovered | boolean | false | Forces display of the hover state of the element |
| isPlainText | boolean | false | Render dropdown item as non-interactive item |
| listItemClassName | string | Class to be applied to list item | |
| styleChildren | boolean | Whether to set className on component when React.isValidElement(component) | |
| tabIndex | number | null | -1 | tabIndex to use, null to unset it |
| tooltip | React.ReactNode | Tooltip to display when hovered over the item | |
| tooltipProps | any | {} | Additional tooltip props forwarded to the Tooltip component |
DropdownToggle
| Name | Type | Default | Description |
|---|---|---|---|
| aria-haspopup | boolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree' | Accessibility property to indicate correct has popup | |
| aria-label | string | Accessible label for the dropdown toggle button | |
| children | React.ReactNode | null | Anything which can be rendered as dropdown toggle button |
| className | string | '' | Classes applied to root element of dropdown toggle button |
| getMenuRef | () => HTMLElement | null | The menu element |
| icon | React.ReactNode | null | An image to display within the dropdown toggle, appearing before any component children |
| id | string | '' | HTML ID of dropdown toggle |
| isActive | boolean | false | Forces active state |
| isDisabled | boolean | false | Whether or not the <div> has a disabled state |
| isOpen | boolean | false | Flag to indicate if menu is opened |
| isPlain | boolean | false | Display the toggle with no border or background |
| isPrimary | boolean | false | Whether or not the dropdown toggle button should have primary button styling |
| onEnter | (event?: React.MouseEvent<HTMLButtonElement>) => void | Callback called when the Enter key is pressed | |
| onToggle | (isOpen: boolean) => void | (_isOpen: boolean) => undefined as any | Callback called when toggle is clicked |
| parentRef | HTMLElement | null | Element which wraps toggle |
| splitButtonItems | React.ReactNode[] | Elements to display before the toggle button. When included, renders the toggle as a split button. | |
| splitButtonVariant | 'action' | 'checkbox' | 'checkbox' | Variant of split button toggle |
| toggleIndicator | React.ElementType | null | CaretDownIcon | The icon to display for the toggle, appearing after any component children. Defaults to CaretDownIcon. Set to null to not show an icon. |
| type | 'button' | 'submit' | 'reset' | Type to put on the button |
DropdownToggleCheckbox
| Name | Type | Default | Description |
|---|---|---|---|
| aria-labelrequired | string | Aria-label of the checkbox | |
| idrequired | string | Id of the checkbox | |
| checked | boolean | null | Alternate Flag to show if the checkbox is checked | |
| children | React.ReactNode | Element to be rendered inside the <span> | |
| className | string | '' | Additional classes added to the DropdownToggleCheckbox |
| isChecked | boolean | null | Flag to show if the checkbox is checked | |
| isDisabled | boolean | false | Flag to show if the checkbox is disabled |
| isValid | boolean | true | Flag to show if the checkbox selection is valid or invalid |
| onChange | (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void | () => undefined as any | A callback for when the checkbox selection changes |
DropdownToggleAction
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Aria-label of the action button | |
| children | React.ReactNode | Element to be rendered inside the <button> | |
| className | string | '' | Additional classes added to the DropdownToggleAction |
| id | string | Id of the action button | |
| isDisabled | boolean | false | Flag to show if the action button is disabled |
| onClick | (event: React.MouseEvent<HTMLButtonElement>) => void | () => {} | A callback for when the action button is clicked |
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 | 0 | |
| .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--before--BorderWidth | 1px | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderTopColor | #f0f0f0 | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderRightColor | #f0f0f0 | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderBottomColor | #8a8d90 | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--before--BorderLeftColor | #f0f0f0 | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--hover--before--BorderBottomColor | #06c | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--active--before--BorderBottomWidth | 2px | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--active--before--BorderBottomColor | #06c | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--before--BorderBottomWidth | 2px | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--before--BorderBottomColor | #06c | |
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth | 2px | |
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor | #06c | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--disabled--BackgroundColor | #f0f0f0 | |
| .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-plain--PaddingRight | 1rem | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--PaddingLeft | 1rem | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-plain--child--LineHeight | normal | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--Color | #fff | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--BorderRadius | 3px | |
| .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--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--LineHeight | 1.5 | |
| .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--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--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__menu-item-description--FontSize | 0.75rem | |
| .pf-c-dropdown | --pf-c-dropdown__menu-item-description--Color | #6a6e73 | |
| .pf-c-dropdown | --pf-c-dropdown__group--group--PaddingTop | 0.5rem | |
| .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 | 700 | |
| .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-dropdown__toggle--c-badge__toggle-icon--MarginLeft | 0.25rem | |
| .pf-c-dropdown | --pf-c-dropdown__toggle--c-badge__toggle-icon--MarginRight | 0 | |
| .pf-c-dropdown | --pf-c-dropdown--c-menu--Top | calc(100% + 0.25rem) | |
| .pf-c-dropdown | --pf-c-dropdown--c-menu--ZIndex | 200 | |
| .pf-c-dropdown | --pf-c-dropdown--m-top--c-menu--Top | 0 | |
| .pf-c-dropdown | --pf-c-dropdown--m-top--c-menu--TranslateY | calc(-100% - 0.25rem) | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--before--BorderTopWidth | 0 | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth | 4px | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth | 4px | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth | 4px | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth | 4px | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--PaddingRight | 1.5rem | |
| .pf-c-dropdown | --pf-c-dropdown--m-full-height__toggle--PaddingLeft | 1.5rem | |
| .pf-c-dropdown .pf-c-divider:last-child | --pf-c-dropdown--c-divider--MarginBottom | 0 | |
| .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown__toggle--PaddingRight | 1.5rem | |
| .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown__toggle--PaddingLeft | 1.5rem | |
| .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown__toggle--active--before--BorderBottomWidth | 4px | |
| .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown__toggle--focus--before--BorderBottomWidth | 4px | |
| .pf-c-dropdown.pf-m-full-height | --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth | 4px | |
| .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--before--BorderBottomColor | #06c | |
| .pf-c-dropdown__toggle:not(.pf-m-action):active::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | |
| .pf-c-dropdown__toggle:not(.pf-m-action):focus::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | |
| .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action)::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | |
| .pf-c-dropdown__toggle.pf-m-plain | --pf-c-dropdown__toggle--PaddingRight | 1rem | |
| .pf-c-dropdown__toggle.pf-m-plain | --pf-c-dropdown__toggle--PaddingLeft | 1rem | |
| .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 > .pf-c-badge | --pf-c-dropdown__toggle-icon--MarginLeft | 0.25rem | |
| .pf-c-dropdown__toggle > .pf-c-badge | --pf-c-dropdown__toggle-icon--MarginRight | 0 | |
| .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.pf-m-top > .pf-c-menu | --pf-c-dropdown--c-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 | |
View source on GitHub
