Dropdown

The Dropdown component is a lightweight context menu for housing navigation and actions, which can be styled using the same scheme/variant options as the sibling Button component.

Default example

<Dropdown minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>

Different menu positions

A drop-down menu can be positioned either above or below (top or bottom, respectively) from the main button element.

<Dropdown location='top' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>
<Dropdown location='bottom' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>

Different color styles/schemes

The following is a subset of available schemes or color variants for a drop-down menu. For the complete list, view the theme's colorStyles dictionary.

<Dropdown scheme="plain" title='Plain scheme' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>
<Dropdown scheme="primary" title='Primary scheme' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>
<Dropdown scheme="danger" title='Danger scheme' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>
<Dropdown scheme="disabled" title='Disabled scheme' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>
<Dropdown scheme="purple" title='Purple scheme' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>

Dark overlay/background

You can also add a dark-overlay to your drop-down in parallel with any of the color styles/schemes noted above. Here's one example

<Dropdown scheme="purple" dark title='Purple scheme with dark overlay/bg' minWidth="6em">
  <Box role="list">
    <Box role="listitem">Item 1</Box>
    <Box role="listitem">Item 2</Box>
    <Box role="listitem">Item 3</Box>
  </Box>
</Dropdown>

System props

Dropdown components get COMMON system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
schemeStringButton scheme used to style the component, can be one of danger, outline, primary or others as defined for the Button component's variant prop
titleStringOptional prop to set the text in the Dropdown button