Examples
Appending document body vs parent
Avoid passing in document.body when passing a value to the menuAppendTo prop on the Dropdown component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers).
Instead append to "parent" to achieve the same result without sacrificing accessibility.
In this example, while, after making a selection, both variants retain focus on their respective Dropdown component, the options for the document.body variant cannot be navigated to via Voice Over.
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 | |
| isFlipEnabled | boolean | false | Flag for indicating that the dropdown menu should automatically flip vertically when it reaches the boundary. This prop can only be used when the dropdown component is not appended inline, e.g. `menuAppendTo="parent"` |
| 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 | |
| isText | boolean | Display the toggle in text only mode | |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')} |
| 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 |
| Deprecated: isHovered | boolean | 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 |
| Deprecated: isPrimary | boolean | false | Use `toggleVariant` instead. Whether or not the dropdown toggle button should have primary button styling |
| isText | boolean | false | Display the toggle in text only mode |
| onEnter | (event?: React.MouseEvent<HTMLButtonElement>) => void | Callback called when the Enter key is pressed | |
| onToggle | (value: boolean, event: any) => 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. |
| toggleVariant | 'primary' | 'secondary' | 'default' | 'default' | Alternate styles for the dropdown toggle button |
| 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--focus--before--BorderBottomWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--focus--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--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--focus--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--active--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-primary--disabled--Color | #151515 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--Color | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--BorderRadius | 3px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--BackgroundColor | transparent | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--before--BorderWidth | 1px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--before--BorderColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--active--before--BorderColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor | #06c | ||
| .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--m-split-button--child--BorderRadius | 3px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius | 3px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor | #004080 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth | 1px | ||
| .pf-c-dropdown | --pf-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--Color | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base | 1px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor | #06c | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth | 1px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth | 2px | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth | 2px | ||
| .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--m-plain__toggle-icon--Color | #6a6e73 | ||
| .pf-c-dropdown | --pf-c-dropdown--m-plain--hover__toggle-icon--Color | #151515 | ||
| .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.75rem | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--FontWeight | 400 | ||
| .pf-c-dropdown | --pf-c-dropdown__group-title--Color | #6a6e73 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-image--MarginTop | 0 | ||
| .pf-c-dropdown | --pf-c-dropdown__toggle-image--MarginBottom | 0 | ||
| .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.pf-m-expanded | --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor | #004080 | ||
| .pf-c-dropdown.pf-m-expanded | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-disabled | --pf-c-dropdown__toggle--m-primary--Color | #151515 | ||
| .pf-c-dropdown__toggle.pf-m-disabled | --pf-c-dropdown__toggle--before--BorderBottomColor | transparent | ||
| .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.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled | --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth | 0 | ||
| .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) | --pf-c-dropdown__toggle--before--BorderWidth | 0 | ||
| .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) | --pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth | 0 | ||
| .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover | --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus | --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active | --pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | ||
| .pf-m-expanded > .pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before | --pf-c-dropdown__toggle--before--BorderBottomColor | #06c | ||
| .pf-c-dropdown__toggle.pf-m-plain | --pf-c-dropdown__toggle-icon--Color | #6a6e73 | ||
| .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) | --pf-c-dropdown__toggle--PaddingRight | 1rem | ||
| .pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) | --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:hover | --pf-c-dropdown--m-plain__toggle-icon--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 | --pf-c-dropdown__toggle-button--Color | #fff | ||
| .pf-c-dropdown__toggle.pf-m-primary:hover | --pf-c-dropdown__toggle--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle.pf-m-primary:focus | --pf-c-dropdown__toggle--BackgroundColor | #004080 | ||
| .pf-c-dropdown__toggle.pf-m-primary:active | --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-m-secondary:not(.pf-m-disabled):not([disabled]) | --pf-c-dropdown__toggle--Color | #06c | ||
| .pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) | --pf-c-dropdown__toggle--BackgroundColor | transparent | ||
| .pf-c-dropdown__toggle.pf-m-secondary:hover | --pf-c-dropdown__toggle--m-secondary--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary:focus | --pf-c-dropdown__toggle--m-secondary--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary:active | --pf-c-dropdown__toggle--m-secondary--before--BorderWidth | 2px | ||
| .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary | --pf-c-dropdown__toggle--m-secondary--before--BorderWidth | 2px | ||
| .pf-m-expanded > .pf-c-dropdown__toggle.pf-m-secondary | --pf-c-dropdown__toggle--m-secondary--before--BorderColor | #06c | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) | --pf-c-dropdown__toggle-button--Color | #06c | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover | --pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus | --pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active | --pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth | 2px | ||
| .pf-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active | --pf-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth | 2px | ||
| .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
