Dropdown

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.

Examples

<Dropdown id="DropdownExample" isOpen={isOpen} onToggle={onToggle}>
  <DropdownTrigger elementType="span">
    <Button>Trigger ({isOpen ? "open" : "closed"})</Button>
  </DropdownTrigger>
  <DropdownPopover>
    <Link UNSAFE_className="d-flex py-400 pr-400" href="#info">
      <Icon name="info" UNSAFE_className="mr-400" />
      <Text UNSAFE_className="ml-300">Information</Text>
    </Link>
    <Link UNSAFE_className="d-flex py-400 pr-400" href="#link">
      <Icon name="edit" UNSAFE_className="mr-400" />
      <Text UNSAFE_className="ml-300">More links</Text>
    </Link>
    <Link UNSAFE_className="d-flex py-400 pr-400" href="#profile">
      <Icon name="user" UNSAFE_className="mr-400" />
      <Text UNSAFE_className="ml-300">Profile</Text>
    </Link>
    <Link UNSAFE_className="d-flex py-400 pr-400" href="#help">
      <Icon name="lightbulb" UNSAFE_className="mr-400" />
      <Text UNSAFE_className="ml-300">Help</Text>
    </Link>
  </DropdownPopover>
</Dropdown>

React Properties

DropdownProps

Prop name	Type	Default	Required	Description
`enableAutoClose`	`bool`	`true`	no	Enables close on click outside of Dropdown
`fullWidthMode`	`DropdownFullwidthMode`	`off`	no	Full-width mode
`id`	`string`	-	yes	Component id
`isOpen`	`bool`	`false`	yes	Open state
`onAutoClose`	`(event: Event) => void`	-	no	Callback on close on click outside of Dropdown
`onToggle`	`() => void`	-	yes	Function for toggle open state of dropdown
`placement`	Placement dictionary	`bottom-start`	no	Alignment of the component

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

DropdownTrigger

Prop name	Type	Default	Required	Description
`children`	[`string` \| `ReactNode`]	-	yes	Content of trigger element
`elementType`	[`string` \| `ReactNode`]	`button`	no	Element type of dropdown trigger

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

DropdownPopover

Prop name	Type	Default	Required	Description
`children`	[`string` \| `ReactNode`]	-	yes	Content of trigger element

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

UncontrolledDropdown

Prop name	Type	Default	Required	Description
`enableAutoClose`	`bool`	`true`	no	Enables close on click outside of Dropdown
`fullWidthMode`	`DropdownFullwidthMode`	`off`	no	Full-width mode
`id`	`string`	`<random>`	no	Component id
`onAutoClose`	`(event: Event) => void`	-	no	Callback on close on click outside of Dropdown
`placement`	Placement dictionary	`bottom-start`	no	Alignment of the component

On this page