Dropdowns
Use dropdowns as navigation menus. If you want to render a select see Select.
This is the basic dropdown. It has an attached menu that extends from the bottom.
ReferenceError: React is not definedReferenceError: React is not definedThe 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 definedLists 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 definedPrimary 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 definedDropdown with the flat button styling. Floating menu only.
ReferenceError: React is not definedDropdown with the link styling, retains dropdown padding. Floating menu only.
ReferenceError: React is not definedRendered when no title is specified. Floating menu only.
ReferenceError: React is not definedReferenceError: React is not definedProps
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
blockingScrim | no | Boolean | false | If true, blocks mouse events outside of the dropdown. Clicking outside of the dropdown will still close the dropdown. |
buttonAriaLabel | no | String | aria-label for the button | |
buttonClassName | no | String | Classname to add to the button | |
buttonId | no | String | Randomly generated | Id to add to the button to associate it with the menu for assistive tech |
closeOnMenuClick | no | Boolean | true | If false, do not close the menu when clicking in the dropdown menu |
disableScrim | no | Boolean | false | If true, do not close the menu when clicking outside the dropdown |
dropdownMenuClassName | no | String | Classname to add to the menu | |
flat | no | Boolean | If true, dropdown toggle has no borders and is transparent | |
floatMenu | no | Boolean | false | If true, float the dropdown menu. This only applies to the basic dropdown |
icon | no | String | 'chevron_down' | Name of the icon to use for the toggle icon |
itemClassName | no | String | Classname to add to each child li | |
link | no | Boolean | If true, color the dropdown toggle like a link | |
menuAlign | no | oneOf(['none', 'left', 'right']) | 'none' | Sets the alignment of the menu with the button |
onClick | no | Function | Callback that fires after clicking the button | |
onEntered | no | Function | Callback that fires after opening the dropdown | |
onExited | no | Function | Callback that fires after closing the dropdown | |
scroll | no | Boolean | false | Enables scrolling in the dropdown menu when enabled |
showIcon | no | Boolean | true | If false, do not render an icon in the dropdown toggle. Icon can not be hidden if split or leaving out title. |
size | no | oneOf(['normal', 'large', 'small']) | 'normal' | Sets the size |
split | no | Boolean | If true, separates the button text from the toggle | |
title | no | Node | The button contents | |
toggle | no | Node | To 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';