Skip to main content

Pivotal UI

v19.2.2
Components / Dropdowns

Dropdowns

Use dropdowns as navigation menus. If you want to render a select see Select.

Basic dropdown

This is the basic dropdown. It has an attached menu that extends from the bottom.

ReferenceError: React is not defined
Basic dropdown with custom icon
ReferenceError: React is not defined
Float dropdown menu

The float dropdown menu is spaced 2px below the toggle. It can also be pinned to the left or right for content that exceeds the parent dropdown width.

ReferenceError: React is not defined
Float scroll menu

Lists that are indeterminately long can utilize the float scroll menu. The size is fixed so you'll have to customize the fixed height to achieve your desired results.

ReferenceError: React is not defined
Split dropdown

Primary action that can be executed by clicking on the dropdown label with additional actions hidden within the dropdown menu. Only appropriate as a float menu.

ReferenceError: React is not defined
Flat button dropdown

Dropdown with the flat button styling. Floating menu only.

ReferenceError: React is not defined
Link dropdown

Dropdown with the link styling, retains dropdown padding. Floating menu only.

ReferenceError: React is not defined
Icon dropdown

Rendered when no title is specified. Floating menu only.

ReferenceError: React is not defined
Sizing
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
blockingScrimnoBooleanfalseIf true, blocks mouse events outside of the dropdown. Clicking outside of the dropdown will still close the dropdown.
buttonAriaLabelnoStringaria-label for the button
buttonClassNamenoStringClassname to add to the button
buttonIdnoStringRandomly generatedId to add to the button to associate it with the menu for assistive tech
closeOnMenuClicknoBooleantrueIf false, do not close the menu when clicking in the dropdown menu
disableScrimnoBooleanfalseIf true, do not close the menu when clicking outside the dropdown
dropdownMenuClassNamenoStringClassname to add to the menu
flatnoBooleanIf true, dropdown toggle has no borders and is transparent
floatMenunoBooleanfalseIf true, float the dropdown menu. This only applies to the basic dropdown
iconnoString'chevron_down'Name of the icon to use for the toggle icon
itemClassNamenoStringClassname to add to each child li
linknoBooleanIf true, color the dropdown toggle like a link
menuAlignnooneOf(['none', 'left', 'right'])'none'Sets the alignment of the menu with the button
onClicknoFunctionCallback that fires after clicking the button
onEnterednoFunctionCallback that fires after opening the dropdown
onExitednoFunctionCallback that fires after closing the dropdown
scrollnoBooleanfalseEnables scrolling in the dropdown menu when enabled
showIconnoBooleantrueIf false, do not render an icon in the dropdown toggle. Icon can not be hidden if split or leaving out title.
sizenooneOf(['normal', 'large', 'small'])'normal'Sets the size
splitnoBooleanIf true, separates the button text from the toggle
titlenoNodeThe button contents
togglenoNodeTo provide an element other than a button as the toggle for the menu

Imports

Import React components (including CSS):

import {Dropdown} from 'pivotal-ui/react/dropdowns';

Import CSS only:

import 'pivotal-ui/css/dropdowns';