Dropdown

Examples

Basic

With initial selection

With groups

Disabled

Primary toggle

Secondary toggle

Plain with text toggle

Position right

Alignments on different breakpoints

Direction up

With kebab

With badge

Icon only

Split button

Split button (with text)

Split button (3rd state)

Split button (disabled)

Split button action

Split button primary action

Basic panel

Router link

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

*required
Name	Type	Description
togglerequired	React.ReactElement<any>	Toggle for the dropdown, examples: <DropdownToggle> or <DropdownToggleCheckbox>
alignments	{ sm?: 'right' \| 'left'; md?: 'right' \| 'left'; lg?: 'right' \| 'left'; xl?: 'right' \| 'left'; '2xl'?: 'right' \| 'left'; }	Indicates how the menu will align at screen size breakpoints. Default alignment is set via the position property.
autoFocus	boolean	Flag to indicate if the first dropdown item should gain initial focus, set false when adding a specific auto-focus item (like a current selection) otherwise leave as true
children	React.ReactNode	Anything which can be rendered in a dropdown
className	string	Classes applied to root element of dropdown
contextProps	DropdownContext	Props for extreme customization of dropdown
direction	DropdownDirection \| 'up' \| 'down'	Display menu above or below dropdown toggle
dropdownItems	any[]	Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isFullHeight	boolean	Flag indicating that the dropdown should expand to full height
isGrouped	boolean	Flag to indicate if dropdown has groups
isOpen	boolean	Flag to indicate if menu is opened
isPlain	boolean	Display the toggle with no border or background
isText	boolean	Display the toggle in text only mode
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

*required
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

*required
Name	Type	Default	Description
additionalChild	React.ReactNode		Additional node to include alongside item within the <li>
autoFocus	boolean		Initial focus on the item when the menu is opened (Note: Only applicable to one of the items)
children	React.ReactNode		Anything which can be rendered as dropdown item
className	string		Classes applied to root element of dropdown item
component	React.ReactNode	'a'	A ReactElement to render, or a string to use as the component tag. Example: component={<Link to="/components/alert/">Alert</Link>} Example: component="button" If React.isValidElement(component) the className prop will be injected unless styleChildren="false"
componentID	string		ID for the component element
customChild	React.ReactNode		Custom item rendering that receives the DropdownContext
description	React.ReactNode	null	A short description of the dropdown item, displayed under the dropdown item content
href	string		Default hyperlink location
icon	React.ReactNode	null	An image to display within the DropdownItem, appearing before any component children
isAriaDisabled	boolean	false	Render dropdown item as aria-disabled option
isDisabled	boolean	false	Render dropdown item as disabled option
isHovered	boolean	false	Forces display of the hover state of the element
isPlainText	boolean	false	Render dropdown item as non-interactive item
listItemClassName	string		Class to be applied to list item
styleChildren	boolean		Whether to set className on component when React.isValidElement(component)
tabIndex	number \| null	-1	tabIndex to use, null to unset it
tooltip	React.ReactNode		Tooltip to display when hovered over the item
tooltipProps	any	{}	Additional tooltip props forwarded to the Tooltip component

DropdownToggle

*required
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

*required
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

*required
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__toggle--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--PaddingRight	0.5rem
--pf-c-dropdown__toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--PaddingBottom	0.375rem
--pf-c-dropdown__toggle--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--PaddingLeft	0.5rem
--pf-c-dropdown__toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--MinWidth	0
	.pf-c-dropdown	--pf-c-dropdown__toggle--FontSize	1rem
--pf-c-dropdown__toggle--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--FontWeight	400
--pf-c-dropdown__toggle--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-dropdown	--pf-c-dropdown__toggle--Color	#151515
--pf-c-dropdown__toggle--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__toggle--LineHeight	1.5
--pf-c-dropdown__toggle--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-dropdown	--pf-c-dropdown__toggle--BackgroundColor	transparent
	.pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderWidth	1px
--pf-c-dropdown__toggle--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderTopColor	#f0f0f0
--pf-c-dropdown__toggle--before--BorderTopColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderRightColor	#f0f0f0
--pf-c-dropdown__toggle--before--BorderRightColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderBottomColor	#8a8d90
--pf-c-dropdown__toggle--before--BorderBottomColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-dropdown	--pf-c-dropdown__toggle--before--BorderLeftColor	#f0f0f0
--pf-c-dropdown__toggle--before--BorderLeftColor --pf-global--BorderColor--300 $pf-global--BorderColor--300 $pf-color-black-200 #f0f0f0
	.pf-c-dropdown	--pf-c-dropdown__toggle--hover--before--BorderBottomColor	#06c
--pf-c-dropdown__toggle--hover--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--focus--before--BorderBottomWidth	2px
--pf-c-dropdown__toggle--focus--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown__toggle--focus--before--BorderBottomColor	#06c
--pf-c-dropdown__toggle--focus--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--active--before--BorderBottomWidth	2px
--pf-c-dropdown__toggle--active--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown__toggle--active--before--BorderBottomColor	#06c
--pf-c-dropdown__toggle--active--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth	2px
--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor	#06c
--pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--disabled--BackgroundColor	#f0f0f0
--pf-c-dropdown__toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #f0f0f0
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-plain--Color	#6a6e73
--pf-c-dropdown__toggle--m-plain--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-plain--hover--Color	#151515
--pf-c-dropdown__toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-plain--disabled--Color	#d2d2d2
--pf-c-dropdown__toggle--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-plain--PaddingRight	1rem
--pf-c-dropdown__toggle--m-plain--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-plain--PaddingLeft	1rem
--pf-c-dropdown__toggle--m-plain--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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__toggle--m-primary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-primary--BorderRadius	3px
--pf-c-dropdown__toggle--m-primary--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-primary--BackgroundColor	#06c
--pf-c-dropdown__toggle--m-primary--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-primary--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-primary--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-primary--active--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-primary--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor	#004080
--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-primary--disabled--Color	#151515
--pf-c-dropdown__toggle--m-primary--disabled--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--Color	#06c
--pf-c-dropdown__toggle--m-secondary--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--BorderRadius	3px
--pf-c-dropdown__toggle--m-secondary--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 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__toggle--m-secondary--before--BorderWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth	2px
--pf-c-dropdown__toggle--m-secondary--hover--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth	2px
--pf-c-dropdown__toggle--m-secondary--focus--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth	2px
--pf-c-dropdown__toggle--m-secondary--active--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--before--BorderColor	#06c
--pf-c-dropdown__toggle--m-secondary--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor	#06c
--pf-c-dropdown__toggle--m-secondary--hover--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor	#06c
--pf-c-dropdown__toggle--m-secondary--focus--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-secondary--active--before--BorderColor	#06c
--pf-c-dropdown__toggle--m-secondary--active--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth	2px
--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth --pf-global--BorderWidth--md $pf-global--BorderWidth--md 2px
	.pf-c-dropdown	--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor	#06c
--pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle-button--Color	#151515
--pf-c-dropdown__toggle-button--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--child--PaddingTop	0.375rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingTop --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--child--PaddingRight	0.25rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingRight --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom	0.375rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom --pf-global--spacer--form-element $pf-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft	0.25rem
--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 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__toggle--m-split-button--first-child--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight	0.5rem
--pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft	0.5rem
--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight	0.5rem
--pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight	calc(-1 * 1px)
--pf-c-dropdown__toggle--m-split-button--m-action__toggle-button--MarginRight calc(-1 * --pf-global--BorderWidth--sm) calc(-1 * $pf-global--BorderWidth--sm) 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__toggle--m-split-button__toggle-text--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius	3px
--pf-c-dropdown__toggle--m-split-button--m-primary--child--BorderRadius --pf-global--BorderRadius--sm $pf-global--BorderRadius--sm 3px
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor	#06c
--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-split-button--m-primary--child--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor	#004080
--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown	--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth	1px
--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-dropdown	--pf-c-dropdown__toggle-icon--LineHeight	1.5
--pf-c-dropdown__toggle-icon--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-dropdown	--pf-c-dropdown__toggle-icon--MarginRight	0.5rem
--pf-c-dropdown__toggle-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle-icon--MarginLeft	1rem
--pf-c-dropdown__toggle-icon--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 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--m-plain__toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-dropdown	--pf-c-dropdown--m-plain--hover__toggle-icon--Color	#151515
--pf-c-dropdown--m-plain--hover__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__menu--BackgroundColor	#fff
--pf-c-dropdown__menu--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #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__menu--BoxShadow --pf-global--BoxShadow--md $pf-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 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__menu--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu--PaddingBottom	0.5rem
--pf-c-dropdown__menu--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu--Top	calc(100% + 0.25rem)
--pf-c-dropdown__menu--Top calc(100% + --pf-global--spacer--xs) calc(100% + $pf-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem)
	.pf-c-dropdown	--pf-c-dropdown__menu--ZIndex	200
--pf-c-dropdown__menu--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 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--m-top__menu--TranslateY calc(-100% - --pf-global--spacer--xs) calc(-100% - $pf-global--spacer--xs) calc(-100% - pf-size-prem(4px)) 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__menu-item--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item--PaddingRight	1rem
--pf-c-dropdown__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item--PaddingBottom	0.5rem
--pf-c-dropdown__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item--PaddingLeft	1rem
--pf-c-dropdown__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item--FontSize	1rem
--pf-c-dropdown__menu-item--FontSize --pf-global--FontSize--md $pf-global--FontSize--md pf-font-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item--FontWeight	400
--pf-c-dropdown__menu-item--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-dropdown	--pf-c-dropdown__menu-item--LineHeight	1.5
--pf-c-dropdown__menu-item--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 1.5
	.pf-c-dropdown	--pf-c-dropdown__menu-item--Color	#151515
--pf-c-dropdown__menu-item--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__menu-item--hover--Color	#151515
--pf-c-dropdown__menu-item--hover--Color --pf-global--Color--dark-100 $pf-global--Color--dark-100 $pf-color-black-900 #151515
	.pf-c-dropdown	--pf-c-dropdown__menu-item--disabled--Color	#6a6e73
--pf-c-dropdown__menu-item--disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-dropdown	--pf-c-dropdown__menu-item--hover--BackgroundColor	#f0f0f0
--pf-c-dropdown__menu-item--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #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__menu-item--m-text--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-dropdown	--pf-c-dropdown__menu-item-icon--MarginRight	0.5rem
--pf-c-dropdown__menu-item-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item-icon--Width	1.5rem
--pf-c-dropdown__menu-item-icon--Width --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item-icon--Height	1.5rem
--pf-c-dropdown__menu-item-icon--Height --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item-description--FontSize	0.75rem
--pf-c-dropdown__menu-item-description--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-dropdown	--pf-c-dropdown__menu-item-description--Color	#6a6e73
--pf-c-dropdown__menu-item-description--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-dropdown	--pf-c-dropdown__group--group--PaddingTop	0.5rem
--pf-c-dropdown__group--group--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__group-title--PaddingTop	0.5rem
--pf-c-dropdown__group-title--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__group-title--PaddingRight	1rem
--pf-c-dropdown__group-title--PaddingRight --pf-c-dropdown__menu-item--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__group-title--PaddingBottom	0.5rem
--pf-c-dropdown__group-title--PaddingBottom --pf-c-dropdown__menu-item--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__group-title--PaddingLeft	1rem
--pf-c-dropdown__group-title--PaddingLeft --pf-c-dropdown__menu-item--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown	--pf-c-dropdown__group-title--FontSize	0.875rem
--pf-c-dropdown__group-title--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-dropdown	--pf-c-dropdown__group-title--FontWeight	700
--pf-c-dropdown__group-title--FontWeight --pf-global--FontWeight--semi-bold $pf-global--FontWeight--semi-bold $pf-global--FontWeight--bold 700
	.pf-c-dropdown	--pf-c-dropdown__group-title--Color	#6a6e73
--pf-c-dropdown__group-title--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #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__toggle-image--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown--c-divider--MarginTop	0.5rem
--pf-c-dropdown--c-divider--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown--c-divider--MarginBottom	0.5rem
--pf-c-dropdown--c-divider--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-dropdown	--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft	0.25rem
--pf-c-dropdown__toggle--c-badge__toggle-icon--MarginLeft --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 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--c-menu--Top calc(100% + --pf-global--spacer--xs) calc(100% + $pf-global--spacer--xs) calc(100% + pf-size-prem(4px)) calc(100% + 0.25rem)
	.pf-c-dropdown	--pf-c-dropdown--c-menu--ZIndex	200
--pf-c-dropdown--c-menu--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 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--m-top--c-menu--TranslateY calc(-100% - --pf-global--spacer--xs) calc(-100% - $pf-global--spacer--xs) calc(-100% - pf-size-prem(4px)) 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--m-full-height__toggle--expanded--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown	--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth	4px
--pf-c-dropdown--m-full-height__toggle--hover--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown	--pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth	4px
--pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown	--pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth	4px
--pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown	--pf-c-dropdown--m-full-height__toggle--PaddingRight	1.5rem
--pf-c-dropdown--m-full-height__toggle--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-dropdown	--pf-c-dropdown--m-full-height__toggle--PaddingLeft	1.5rem
--pf-c-dropdown--m-full-height__toggle--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 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__toggle--PaddingRight --pf-c-dropdown--m-full-height__toggle--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-dropdown.pf-m-full-height	--pf-c-dropdown__toggle--PaddingLeft	1.5rem
--pf-c-dropdown__toggle--PaddingLeft --pf-c-dropdown--m-full-height__toggle--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-dropdown.pf-m-full-height	--pf-c-dropdown__toggle--active--before--BorderBottomWidth	4px
--pf-c-dropdown__toggle--active--before--BorderBottomWidth --pf-c-dropdown--m-full-height__toggle--active--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown.pf-m-full-height	--pf-c-dropdown__toggle--focus--before--BorderBottomWidth	4px
--pf-c-dropdown__toggle--focus--before--BorderBottomWidth --pf-c-dropdown--m-full-height__toggle--focus--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown.pf-m-full-height	--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth	4px
--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth --pf-c-dropdown--m-full-height__toggle--expanded--before--BorderBottomWidth --pf-global--BorderWidth--xl $pf-global--BorderWidth--xl 4px
	.pf-c-dropdown.pf-m-expanded	--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor	#004080
--pf-c-dropdown__toggle--m-split-button--m-primary--child--BackgroundColor --pf-c-dropdown__toggle--m-split-button--m-primary--child--m-expanded--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown__toggle.pf-m-disabled	--pf-c-dropdown__toggle--m-primary--Color	#151515
--pf-c-dropdown__toggle--m-primary--Color --pf-c-dropdown__toggle--m-primary--disabled--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #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--BackgroundColor --pf-c-dropdown__toggle--disabled--BackgroundColor --pf-global--disabled-color--300 $pf-global--disabled-color--300 $pf-color-black-200 #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--m-split-button--child--PaddingLeft --pf-c-dropdown__toggle--m-split-button--first-child--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--m-split-button--child--PaddingRight --pf-c-dropdown__toggle--m-split-button--last-child--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--m-split-button--child--PaddingRight --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--m-split-button--child--PaddingLeft --pf-c-dropdown__toggle--m-split-button--m-action--child--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 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--m-split-button--m-primary--child--BackgroundColor --pf-c-dropdown__toggle--m-split-button--m-primary--child--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #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--m-split-button--m-primary--child--BackgroundColor --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #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--m-split-button--m-primary--child--BackgroundColor --pf-c-dropdown__toggle--m-split-button--m-primary--child--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #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--before--BorderBottomColor --pf-c-dropdown__toggle--hover--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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--before--BorderBottomColor --pf-c-dropdown__toggle--focus--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown__toggle:not(.pf-m-action):not(.pf-m-secondary):active::before	--pf-c-dropdown__toggle--before--BorderBottomColor	#06c
--pf-c-dropdown__toggle--before--BorderBottomColor --pf-c-dropdown__toggle--active--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #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--before--BorderBottomColor --pf-c-dropdown--m-expanded__toggle--before--BorderBottomColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown__toggle.pf-m-plain	--pf-c-dropdown__toggle-icon--Color	#6a6e73
--pf-c-dropdown__toggle-icon--Color --pf-c-dropdown--m-plain__toggle-icon--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)	--pf-c-dropdown__toggle--PaddingRight	1rem
--pf-c-dropdown__toggle--PaddingRight --pf-c-dropdown__toggle--m-plain--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text)	--pf-c-dropdown__toggle--PaddingLeft	1rem
--pf-c-dropdown__toggle--PaddingLeft --pf-c-dropdown__toggle--m-plain--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-dropdown__toggle.pf-m-plain:hover	--pf-c-dropdown__toggle--m-plain--Color	#151515
--pf-c-dropdown__toggle--m-plain--Color --pf-c-dropdown__toggle--m-plain--hover--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown__toggle.pf-m-plain:hover	--pf-c-dropdown--m-plain__toggle-icon--Color	#151515
--pf-c-dropdown--m-plain__toggle-icon--Color --pf-c-dropdown--m-plain--hover__toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-dropdown__toggle.pf-m-plain.pf-m-disabled	--pf-c-dropdown__toggle--m-plain--Color	#d2d2d2
--pf-c-dropdown__toggle--m-plain--Color --pf-c-dropdown__toggle--m-plain--disabled--Color --pf-global--disabled-color--200 $pf-global--disabled-color--200 $pf-color-black-300 #d2d2d2
	.pf-c-dropdown__toggle.pf-m-primary	--pf-c-dropdown__toggle--Color	#fff
--pf-c-dropdown__toggle--Color --pf-c-dropdown__toggle--m-primary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-dropdown__toggle.pf-m-primary	--pf-c-dropdown__toggle--BackgroundColor	#06c
--pf-c-dropdown__toggle--BackgroundColor --pf-c-dropdown__toggle--m-primary--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown__toggle.pf-m-primary	--pf-c-dropdown__toggle-button--Color	#fff
--pf-c-dropdown__toggle-button--Color --pf-c-dropdown__toggle--m-primary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-dropdown__toggle.pf-m-primary:hover	--pf-c-dropdown__toggle--BackgroundColor	#004080
--pf-c-dropdown__toggle--BackgroundColor --pf-c-dropdown__toggle--m-primary--hover--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown__toggle.pf-m-primary:focus	--pf-c-dropdown__toggle--BackgroundColor	#004080
--pf-c-dropdown__toggle--BackgroundColor --pf-c-dropdown__toggle--m-primary--focus--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown__toggle.pf-m-primary:active	--pf-c-dropdown__toggle--BackgroundColor	#004080
--pf-c-dropdown__toggle--BackgroundColor --pf-c-dropdown__toggle--m-primary--active--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary	--pf-c-dropdown__toggle--BackgroundColor	#004080
--pf-c-dropdown__toggle--BackgroundColor --pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor --pf-global--primary-color--200 $pf-global--primary-color--200 $pf-color-blue-500 #004080
	.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])	--pf-c-dropdown__toggle--Color	#06c
--pf-c-dropdown__toggle--Color --pf-c-dropdown__toggle--m-secondary--Color --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])	--pf-c-dropdown__toggle--BackgroundColor	transparent
--pf-c-dropdown__toggle--BackgroundColor --pf-c-dropdown__toggle--m-secondary--BackgroundColor transparent

Dropdown

Examples

Basic

With initial selection

With groups

Disabled

Primary toggle

Secondary toggle

Plain with text toggle

Position right

Alignments on different breakpoints

Direction up

With kebab

With badge

Icon only

Split button

Split button (with text)

Split button (3rd state)

Split button (disabled)

Split button action

Split button primary action

Basic panel

Router link

Dropdown with image and text

Appending document body vs parent

Dropdown with descriptions

Props

Dropdown

DropdownGroup

DropdownItem

DropdownToggle

DropdownToggleCheckbox

DropdownToggleAction

CSS variables