Dropdown

Dropdowns are used for displaying lists or selecting options.

Dropdown is a detail element. For Bridge styling and toggling, use Dropdown.Summary with it. If not, use a custom summary. The Dropdown will display the menu right below it.

Example

Choose a color
  • Blue
  • Red
  • Green
  • Purple
  • Lavender
  • Black

Using State

Dropdown comes with onToggle, onClickOutside and open event props for you to handle in any way. Here's an example of a single checkbox with React Hooks.

const [open, setOpen] = useState(false);
const handleToggle = (e) => setOpen(e.target.open)
const handleClickOutside = () => setOpen(false)
return (
<Dropdown open={open} onToggle={handleToggle} onClickOutside={handleClickOutside}>
<Dropdown.Summary>Dropdown</Dropdown.Summary>
<Dropdown.Menu>
<Dropdown.Item>Item 1</Dropdown.Item>
<Dropdown.Item>Item 2</Dropdown.Item>
<Dropdown.Item>Item 3</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
)

Error Handling

Use the error prop in Dropdown to define the error state of that Checkbox Component. You may choose between default, error, warning, and success.

Choose a color
  • Blue
  • Red
  • Green
  • Purple
  • Lavender
  • Black

Common Props

Dropdown, Dropdown.Menu, Dropdown.Summary, and Dropdown.Item includes COMMON and TYPOGRAPHY common props. Dropdown.Caret includes COMMON common props. Read Common Props for details and API. These common props will override component props such as the color.

Prop nameTypeDefaultDescription
childrenNodeChildren of Dropdown
classNameStringCSS classes to add to Dropdown
defaultOpenBooleanFalseWhether it is initially open or not. This should not be used when open, onToggle, onClickOutside is used
errordefault | error | warning | success'default'Set the error state
idStringInput ID. This should always be set for accessibility purposes.
openBooleanUse the open prop if you'd like to manage the open state
onToggleFunctionCalled whenever user clicks on summary element. If you are controlling your own open state this will be the only function called on click, otherwise it's called before the internal handleToggle function.
onClickOutsideFunctionFunction to call whenever user clicks outside of the Details component. This is optional and only necessary if you are controlling your own open state.
themeObjectBridge ThemeUse to override default bridge theme