Dropdown

The Dropdown component is a lightweight context menu for housing navigation and actions.

Dropdown.Menu wraps your menu content. Be sure to pass a direction prop to this component to position the menu in relation to the Dropdown.Button.

Default example

<Dropdown title="Dropdown">
  <Dropdown.Menu direction='sw'>
    <Dropdown.Item>Item 1</Dropdown.Item>
    <Dropdown.Item>Item 2</Dropdown.Item>
    <Dropdown.Item>Item 3</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

System props

Dropdown, Dropdown.Menu, and Dropdown.Item all get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

Dropdown.Menu

NameTypeDefaultDescription
directionString'sw'Sets the direction of the dropdown menu.
titleStringSets the text inside of the button

Dropdown.Item

No additional props.

Dropdown

No additional props.

Edit this page on GitHub