PatternFly

Dropdown

A dropdown presents a menu of actions or links in a constrained space that will trigger a process or navigate to a new location. See select component guidelines for more information about making one or more selections from a list of items in a value list.

A newer React implementation of the dropdown has replaced the deprecated implementation. The documentation for the deprecated implementation is under the React deprecated tab, and this deprecated implementation can be imported from @patternfly/react-core/deprecated.

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

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.

<DropdownItem> may use the component property to include router links.

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 isPlainproperties. 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.

Toggle with badge

You may use a <BadgeToggle> to display the number of dropdown menu items.

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.

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.

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

*required
NameTypeDefaultDescription
togglerequiredReact.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.
autoFocusbooleanFlag 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
childrenReact.ReactNodeAnything which can be rendered in a dropdown
classNamestringClasses applied to root element of dropdown
contextPropsDropdownContextProps for extreme customization of dropdown
directionDropdownDirection | 'up' | 'down'Display menu above or below dropdown toggle
dropdownItemsany[]Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isFlipEnabledbooleantrueFlag 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"`
isFullHeightbooleanFlag indicating that the dropdown should expand to full height
isGroupedbooleanFlag to indicate if dropdown has groups
isOpenbooleanFlag to indicate if menu is opened
isPlainbooleanDisplay the toggle with no border or background
isTextbooleanDisplay the toggle in text only mode
menuAppendToHTMLElement | (() => 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')}
minWidthstring | 'trigger'Minimum width of the dropdown menu. If set to "trigger", the minimum width will be set to the toggle width.
onSelect(event?: React.SyntheticEvent<HTMLDivElement>) => voidFunction callback called when user selects item
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
positionDropdownPosition | 'right' | 'left'Indicates where menu will be aligned horizontally
zIndexnumber9999z-index of the dropdown when menuAppendTo is not inline.
*required
NameTypeDefaultDescription
childrenReact.ReactNodenullCheckboxes within group
classNamestring''Additional classes added to the DropdownGroup control
labelReact.ReactNode''Group label
*required
NameTypeDefaultDescription
additionalChildReact.ReactNodeAdditional node to include alongside item within the <li>
autoFocusbooleanInitial focus on the item when the menu is opened (Note: Only applicable to one of the items)
childrenReact.ReactNodeAnything which can be rendered as dropdown item
classNamestringClasses applied to root element of dropdown item
componentReact.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"
componentIDstringID for the component element
customChildReact.ReactNodeCustom item rendering that receives the DropdownContext
descriptionReact.ReactNodenullA short description of the dropdown item, displayed under the dropdown item content
hrefstringDefault hyperlink location
iconReact.ReactNodenullAn image to display within the DropdownItem, appearing before any component children
isAriaDisabledbooleanfalseRender dropdown item as aria-disabled option
isDisabledbooleanfalseRender dropdown item as disabled option
isPlainTextbooleanfalseRender dropdown item as non-interactive item
listItemClassNamestringClass to be applied to list item
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
styleChildrenbooleanWhether to set className on component when React.isValidElement(component)
tabIndexnumber | null-1tabIndex to use, null to unset it
tooltipReact.ReactNodeTooltip to display when hovered over the item
tooltipPropsany{}Additional tooltip props forwarded to the Tooltip component
*required
NameTypeDefaultDescription
aria-haspopupboolean | 'listbox' | 'menu' | 'dialog' | 'grid' | 'tree'Accessibility property to indicate correct has popup
aria-labelstringAccessible label for the dropdown toggle button
childrenReact.ReactNodenullAnything which can be rendered as dropdown toggle button
classNamestring''Classes applied to root element of dropdown toggle button
getMenuRef() => HTMLElementnullThe menu element
iconReact.ReactNodenullAn image to display within the dropdown toggle, appearing before any component children
idstring''HTML ID of dropdown toggle
isActivebooleanfalseForces active state
isDisabledbooleanfalseWhether or not the <div> has a disabled state
isOpenbooleanfalseFlag to indicate if menu is opened
isPlainbooleanfalseDisplay the toggle with no border or background
isTextbooleanfalseDisplay the toggle in text only mode
onEnter(event?: React.MouseEvent<HTMLButtonElement>) => voidCallback called when the Enter key is pressed
onToggle( event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>, isOpen: boolean ) => void(_evt: any, _isOpen: boolean) => undefined as anyCallback called when toggle is clicked
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
parentRefHTMLElementnullElement which wraps toggle
splitButtonItemsReact.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
toggleIndicatorReact.ElementType | nullCaretDownIconThe 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
*required
NameTypeDefaultDescription
aria-labelrequiredstringAria-label of the checkbox
idrequiredstringId of the checkbox
checkedboolean | nullAlternate Flag to show if the checkbox is checked
childrenReact.ReactNodeElement to be rendered inside the <span>
classNamestring''Additional classes added to the DropdownToggleCheckbox
defaultProgressAriaLabelstringAria-label for the default progress icon to describe what is loading
defaultProgressAriaValueTextstringText describing current loading status or progress
isCheckedboolean | nullFlag to show if the checkbox is checked
isDisabledbooleanfalseFlag to show if the checkbox is disabled
isInProgressboolean | nullFlag to show if the checkbox is in progress
isValidbooleantrueFlag to show if the checkbox selection is valid or invalid
onChange(event: React.FormEvent<HTMLInputElement>, checked: boolean) => void() => undefined as anyA callback for when the checkbox selection changes
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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.
*required
NameTypeDefaultDescription
aria-labelstringAria-label of the action button
childrenReact.ReactNodeElement to be rendered inside the <button>
classNamestring''Additional classes added to the DropdownToggleAction
idstringId of the action button
isDisabledbooleanfalseFlag to show if the action button is disabled
onClick(event: React.MouseEvent<HTMLButtonElement>) => void() => {}A callback for when the action button is clicked
*required
NameTypeDefaultDescription
classNamestring''Classes applied to root element of dropdown item
onClick(event: React.MouseEvent<HTMLAnchorElement> | React.KeyboardEvent | MouseEvent) => voidClick event to pass to InternalDropdownItem
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleanSet 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

Expand or collapse columnSelectorVariableValue
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--PaddingTop
0.375rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--PaddingRight
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--PaddingBottom
0.375rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--PaddingLeft
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--ColumnGap
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--MinWidth
0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--FontSize
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--FontWeight
400
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--LineHeight
1.5
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--BackgroundColor
transparent
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderWidth
1px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderTopColor
#f0f0f0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderRightColor
#f0f0f0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderBottomColor
#8a8d90
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--before--BorderLeftColor
#f0f0f0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--hover--before--BorderBottomColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--focus--before--BorderBottomColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--active--before--BorderBottomColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--disabled--BackgroundColor
#f0f0f0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-plain--Color
#6a6e73
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-plain--hover--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-plain--disabled--Color
#d2d2d2
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-plain--PaddingRight
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-plain--PaddingLeft
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-plain--child--LineHeight
normal
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--Color
#fff
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--BorderRadius
3px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--BackgroundColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--hover--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--focus--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--active--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-primary--disabled--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--Color
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--BorderRadius
3px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--BackgroundColor
transparent
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth
1px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-button--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-button--BackgroundColor
transparent
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-progress--Visibility
hidden
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-progress--c-spinner--diameter
0.875rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingTop
0.375rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight
0.25rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingBottom
0.375rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft
0.25rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--child--BackgroundColor
transparent
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--first-child--PaddingLeft
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--last-child--PaddingRight
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight
calc(-1 * 1px)
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button__toggle-text--MarginLeft
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--child--BorderRadius
3px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius
3px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor
#004080
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth
1px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-expanded__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--Color
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--hover--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--focus--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--active--before--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth--base
1px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor--base
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderColor
#06c
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
1px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--hover--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--focus--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--active--BorderWidth
2px
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-icon--LineHeight
1.5
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-icon--PaddingRight
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-icon--PaddingLeft
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle-icon--MarginLeft
0
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-top--m-expanded__toggle-icon--Rotate
180deg
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-plain__toggle-icon--Color
#6a6e73
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-plain--hover__toggle-icon--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu--BackgroundColor
#fff
.pf-v5-c-dropdown--pf-v5-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-v5-c-dropdown--pf-v5-c-dropdown__menu--PaddingTop
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu--PaddingBottom
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu--Top
calc(100% + 0.25rem)
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu--ZIndex
200
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-top__menu--Top
0
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-top__menu--TranslateY
calc(-100% - 0.25rem)
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--BackgroundColor
transparent
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--PaddingTop
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--PaddingRight
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--PaddingBottom
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--PaddingLeft
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--FontSize
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--FontWeight
400
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--LineHeight
1.5
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--hover--Color
#151515
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--disabled--Color
#6a6e73
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--hover--BackgroundColor
#f0f0f0
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--disabled--BackgroundColor
transparent
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item--m-text--Color
#6a6e73
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item-icon--MarginRight
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item-icon--Width
1.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item-icon--Height
1.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item-description--FontSize
0.75rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__menu-item-description--Color
#6a6e73
.pf-v5-c-dropdown--pf-v5-c-dropdown__group--group--PaddingTop
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--PaddingTop
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--PaddingRight
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--PaddingBottom
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--PaddingLeft
1rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--FontSize
0.75rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--FontWeight
400
.pf-v5-c-dropdown--pf-v5-c-dropdown__group-title--Color
#6a6e73
.pf-v5-c-dropdown--pf-v5-c-dropdown--c-divider--MarginTop
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown--c-divider--MarginBottom
0.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingRight
0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--PaddingLeft
0
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft
0.25rem
.pf-v5-c-dropdown--pf-v5-c-dropdown__toggle--c-badge__toggle-icon--MarginRight
0
.pf-v5-c-dropdown--pf-v5-c-dropdown--c-menu--Top
calc(100% + 0.25rem)
.pf-v5-c-dropdown--pf-v5-c-dropdown--c-menu--ZIndex
200
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-top--c-menu--Top
0
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-top--c-menu--TranslateY
calc(-100% - 0.25rem)
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--before--BorderTopWidth
0
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth
4px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth
4px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth
4px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth
4px
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--PaddingRight
1.5rem
.pf-v5-c-dropdown--pf-v5-c-dropdown--m-full-height__toggle--PaddingLeft
1.5rem
.pf-v5-c-dropdown .pf-v5-c-divider:last-child--pf-v5-c-dropdown--c-divider--MarginBottom
0
.pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown__toggle--PaddingRight
1.5rem
.pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown__toggle--PaddingLeft
1.5rem
.pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown__toggle--active--before--BorderBottomWidth
4px
.pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown__toggle--focus--before--BorderBottomWidth
4px
.pf-v5-c-dropdown.pf-m-full-height--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth
4px
.pf-v5-c-dropdown.pf-m-expanded--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-v5-c-dropdown.pf-m-expanded--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-disabled--pf-v5-c-dropdown__toggle--m-primary--Color
#151515
.pf-v5-c-dropdown__toggle.pf-m-disabled--pf-v5-c-dropdown__toggle--before--BorderBottomColor
transparent
.pf-v5-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)--pf-v5-c-dropdown__toggle--BackgroundColor
#f0f0f0
.pf-v5-c-dropdown__toggle.pf-m-split-button--pf-v5-c-dropdown__toggle--ColumnGap
0
.pf-v5-c-dropdown__toggle.pf-m-split-button > *:first-child--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft
0.5rem
.pf-v5-c-dropdown__toggle.pf-m-split-button > *:last-child--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight
0.5rem
.pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingRight
0.5rem
.pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action--pf-v5-c-dropdown__toggle--m-split-button--child--PaddingLeft
0.5rem
.pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action .pf-v5-c-dropdown__toggle-button:last-child--pf-v5-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight
0
.pf-v5-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled--pf-v5-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth
0
.pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility
hidden
.pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check.pf-m-in-progress--pf-v5-c-dropdown__toggle-progress--Visibility
visible
.pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input--pf-v5-c-check__input--TranslateY
none
.pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled)--pf-v5-c-dropdown__toggle--before--BorderWidth
0
.pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled)--pf-v5-c-dropdown--m-expanded__toggle--before--BorderBottomWidth
0
.pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:hover--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:focus--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-v5-c-dropdown__toggle.pf-m-primary.pf-m-split-button:not(.pf-m-disabled) > *:active--pf-v5-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor
#004080
.pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):hover::before--pf-v5-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):focus::before--pf-v5-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before--pf-v5-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-m-expanded > .pf-v5-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary)::before--pf-v5-c-dropdown__toggle--before--BorderBottomColor
#06c
.pf-v5-c-dropdown__toggle.pf-m-plain--pf-v5-c-dropdown__toggle-icon--Color
#6a6e73
.pf-v5-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)--pf-v5-c-dropdown__toggle--PaddingRight
1rem
.pf-v5-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)--pf-v5-c-dropdown__toggle--PaddingLeft
1rem
.pf-v5-c-dropdown__toggle.pf-m-plain:hover--pf-v5-c-dropdown__toggle--m-plain--Color
#151515
.pf-v5-c-dropdown__toggle.pf-m-plain:hover--pf-v5-c-dropdown--m-plain__toggle-icon--Color
#151515
.pf-v5-c-dropdown__toggle.pf-m-plain.pf-m-disabled--pf-v5-c-dropdown__toggle--m-plain--Color
#d2d2d2
.pf-v5-c-dropdown__toggle.pf-m-primary--pf-v5-c-dropdown__toggle--Color
#fff
.pf-v5-c-dropdown__toggle.pf-m-primary--pf-v5-c-dropdown__toggle--BackgroundColor
#06c
.pf-v5-c-dropdown__toggle.pf-m-primary--pf-v5-c-dropdown__toggle-button--Color
#fff
.pf-v5-c-dropdown__toggle.pf-m-primary:hover--pf-v5-c-dropdown__toggle--BackgroundColor
#004080
.pf-v5-c-dropdown__toggle.pf-m-primary:focus--pf-v5-c-dropdown__toggle--BackgroundColor
#004080
.pf-v5-c-dropdown__toggle.pf-m-primary:active--pf-v5-c-dropdown__toggle--BackgroundColor
#004080
.pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-primary--pf-v5-c-dropdown__toggle--BackgroundColor
#004080
.pf-v5-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])--pf-v5-c-dropdown__toggle--Color
#06c
.pf-v5-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])--pf-v5-c-dropdown__toggle--BackgroundColor
transparent
.pf-v5-c-dropdown__toggle.pf-m-secondary:hover--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary:focus--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary:active--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-secondary--pf-v5-c-dropdown__toggle--m-secondary--before--BorderWidth
2px
.pf-m-expanded > .pf-v5-c-dropdown__toggle.pf-m-secondary--pf-v5-c-dropdown__toggle--m-secondary--before--BorderColor
#06c
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled)--pf-v5-c-dropdown__toggle-button--Color
#06c
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):hover--pf-v5-c-dropdown__toggle--m-secondary--hover--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):focus--pf-v5-c-dropdown__toggle--m-secondary--focus--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled):active--pf-v5-c-dropdown__toggle--m-secondary--active--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:hover--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:focus--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle.pf-m-secondary.pf-m-split-button:not(.pf-m-disabled) > *:active--pf-v5-c-dropdown__toggle--m-secondary--m-split-button--child--before--BorderWidth
2px
.pf-v5-c-dropdown__toggle > .pf-v5-c-badge--pf-v5-c-dropdown__toggle-icon--PaddingRight
0
.pf-v5-c-dropdown__toggle > .pf-v5-c-badge--pf-v5-c-dropdown__toggle-icon--PaddingLeft
0
.pf-v5-c-dropdown__toggle > .pf-v5-c-badge--pf-v5-c-dropdown__toggle-icon--MarginLeft
0.25rem
.pf-v5-c-dropdown__toggle-progress .pf-v5-c-spinner--pf-v5-c-spinner--diameter
0.875rem
.pf-v5-c-dropdown__menu.pf-m-static--pf-v5-c-dropdown--m-top__menu--TranslateY
0
.pf-v5-c-dropdown.pf-m-top .pf-v5-c-dropdown__menu--pf-v5-c-dropdown__menu--Top
0
.pf-v5-c-dropdown.pf-m-top > .pf-v5-c-menu--pf-v5-c-dropdown--c-menu--Top
0
.pf-v5-c-dropdown__menu-item:hover--pf-v5-c-dropdown__menu-item--Color
#151515
.pf-v5-c-dropdown__menu-item:hover--pf-v5-c-dropdown__menu-item--BackgroundColor
#f0f0f0
.pf-v5-c-dropdown__menu-item:disabled--pf-v5-c-dropdown__menu-item--Color
#6a6e73
.pf-v5-c-dropdown__menu-item:disabled--pf-v5-c-dropdown__menu-item--BackgroundColor
transparent
.pf-v5-c-dropdown__menu-item.pf-m-text--pf-v5-c-dropdown__menu-item--Color
#6a6e73
.pf-v5-c-dropdown__menu-item.pf-m-text:hover--pf-v5-c-dropdown__menu-item--BackgroundColor
transparent

View source on GitHub