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>

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


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


No additional props.


No additional props.

Edit this page on GitHub