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.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Info alert:Templates

This page showcases templates for the dropdown component. A template combines a component with logic that supports a specific use case, with a streamlined API that offers additional, limited customization.

Note: Templates live in their own package at @patternfly/react-templates!

For custom use cases, please see the dropdown component suite from @patternfly/react-core.

Examples

Simple

Props

SimpleDropdown

*required
Name	Type	Description
toggleContentrequired	React.ReactNode	Content of the toggle.
initialItems	SimpleDropdownItem[]	Initial items of the dropdown.
isDisabled	boolean	Flag indicating the dropdown should be disabled.
isToggleFullWidth	boolean	Flag indicated whether the dropdown toggle should take up the full width of its parent.
onSelect	(event?: React.MouseEvent<Element, MouseEvent>, value?: string \| number) => void	Callback triggered when any dropdown item is clicked.
onToggle	(nextIsOpen: boolean) => void	Callback triggered when the dropdown toggle opens or closes.
shouldFocusToggleOnSelect	boolean	Flag indicating the dropdown toggle should be focused after a dropdown item is clicked.
toggleAriaLabel	string	Adds an accessible name to the dropdown toggle. Required when the dropdown toggle does not have any text content.
toggleProps	MenuToggleProps	Additional props passed to the toggle.
toggleVariant	'default' \| 'plain' \| 'plainText'	Variant style of the dropdown toggle.
toggleWidth	string	Width of the toggle.

SimpleDropdownItem

*required
Name	Type	Description
valuerequired	string \| number	Unique identifier for the dropdown item, which is used in the dropdown onSelect callback
content	React.ReactNode	Content of the dropdown item. If the isDivider prop is true, this prop will be ignored.
isDivider	boolean	Flag indicating whether the dropdown item should render as a divider. If true, the item will be rendered without the dropdown item wrapper.
onClick	(event?: any) => void	Callback for when the dropdown item is clicked.
to	string	URL to redirect to when the dropdown item is clicked.

View source on GitHub