Examples
Basic dropdowns
Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The isOpen
property is used to determine whether the menu is opened or not.
All of the items in a dropdown list are created as <DropdownItem>
components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
- Use the
tooltip
property to enable tooltip support. - Use the
isDisabled
property to disable an item. - Use the
isAriaDisabled
property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
This example also uses a <DropdownSeparator>
, which adds a horizontal line that splits the menu into 2 sections.
Autofocus on dropdown expansion
A <DropdownItem>
may use the autoFocus
property so that it automatically receives focus when the menu is expanded. autoFocus
cannot be applied to disabled dropdown items.
With groups of items
Use the <DropdownGroup>
component to group sets of related dropdown items together. Use the isGrouped
property on the Dropdown
component to indicate that a dropdown contains grouped items.
With item descriptions
A <DropdownItem>
may use the description
property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
With custom content
You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
Toggle styling
You can adjust the styling of a <DropdownToggle>
using the toggleVariant
property. toggleVariant
may be set to 'primary', 'secondary', or 'default'.
Plain text toggle
A toggle may be styled as plain text using the isText
and isPlain
properties. The following example applies these properties to a <Dropdown>
component.
Disabled toggles
A <DropdownToggle>
may use the isDisabled
property to disable the expansion of the dropdown menu.
Icon toggle
<DropdownToggle>
may use a recognizable icon instead of a text label if text would take up too much room. Set the toggleIndicator
property to {null}
to remove the default dropdown toggle caret.
Kebab toggle
Use <KebabToggle>
to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
Toggle with image
The icon
property can be used to display an image in the DropdownToggle
and can be used alongside a text label.
Split button (checkbox)
To combine an action button or other control with a dropdown menu, use a split button. A <DropdownToggle>
can be rendered as a split button by using the splitButtonItems
property. Elements to be displayed before the toggle button must be included in splitButtonItems
.
The following example shows a split button with a <DropdownToggleCheckbox>
, which is primarily used for bulk select operations on large data sets.
Split button (checkbox with toggle text)
Text labels may optionally be used alongside actions within split buttons.
Beta
Split button (progress checkbox)The isInProgress
property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
Split button toggle variants
Use the toggleVariant
and splitButtonVariant
properties to adjust the styling of split button toggles.
The following example uses toggleVariant="primary"
to apply primary visual styling and splitButtonVariant="action"
to include an action.
Dropdown alignment
The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A <Dropdown>
may use the alignments
property to indicate how the menu will align at different screen sizes.
Right-positioned menu
The following example demonstrates a <Dropdown>
with a position
equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
Upwards directional menu
The following example demonstrates a <Dropdown>
with a direction
equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
Using document parent element
Avoid passing in document.body
to a <Dropdown>
menuAppendTo
property. Doing so can cause accessibility issues, such as being unable to navigate <Dropdown>
options using keyboards or screen readers.
Instead, append to ‘parent’ to avoid sacrificing accessibility.
The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective <Dropdown>
, but the options for the document.body
variant cannot be navigated 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 | true | 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 | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
position | DropdownPosition | 'right' | 'left' | Indicates where menu will be aligned horizontally | |
removeFindDomNodeBeta | boolean | false | Opt-in for updated popper that does not use findDOMNode. |
zIndex | number | 9999 | z-index of the dropdown when menuAppendTo is not inline. |
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 | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
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 |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. | |
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 |
defaultProgressAriaLabelBeta | string | Aria-label for the default progress icon to describe what is loading | |
defaultProgressAriaValueTextBeta | string | Text describing current loading status or progress | |
isChecked | boolean | null | Flag to show if the checkbox is checked | |
isDisabled | boolean | false | Flag to show if the checkbox is disabled |
isInProgressBeta | boolean | null | Flag to show if the checkbox is in progress | |
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 |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
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 |
DropdownSeparator
Name | Type | Default | Description |
---|---|---|---|
className | string | '' | Classes applied to root element of dropdown item |
onClick | (event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent | MouseEvent) => void | Click event to pass to InternalDropdownItem | |
ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
ouiaSafe | boolean | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
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-progress--Visibility | hidden | ||
.pf-c-dropdown | --pf-c-dropdown__toggle-progress--c-spinner--diameter | 0.875rem | ||
.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-split-button .pf-c-dropdown__toggle-check.pf-m-in-progress | --pf-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility | hidden | ||
.pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check.pf-m-in-progress | --pf-c-dropdown__toggle-progress--Visibility | visible | ||
.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 | ||