Skip to main content
HomeComponentsDropdown
warning
This is a beta release of the Quantum web libraries
Please be careful when using them in production, as they may contain bugs, unstable breaking changes, and incomplete features.
Go to the latest version

Dropdown

The dropdown component is a container for a dropdown-trigger and a dropdown-overlay.

  • dropdown-trigger is the container for a button.
  • dropdown-overlay the togglable container for a menu, hidden by default, with a white background and a shadow.
<Dropdown>
  <DropdownTrigger>
    <Button>Dropdown button</Button>
  </DropdownTrigger>
  <DropdownOverlay>
    <MenuItemList>
      <MenuItem id="dropdown-menu-1">
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
      <MenuItem id="dropdown-menu-2">
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
      <MenuItem id="dropdown-menu-3">
        <MenuItemLabel>Menu Item</MenuItemLabel>
      </MenuItem>
    </MenuItemList>
  </DropdownOverlay>
</Dropdown>

You are able to implement inside a DropdownOverlay a menu item list, a paragraph or whatever.

You can insert any type of content within the dropdown overlay.

<Dropdown visible>
  <DropdownTrigger>
    <Button>Dropdown button</Button>
  </DropdownTrigger>
  <DropdownOverlay>
    <Typography component="body-2" classes="p-m"
      >You can insert any type of content within the dropdown
      overlay.</Typography
    >
  </DropdownOverlay>
</Dropdown>

Visible​

You can use visible attribute to display dropdown-overlay.

<Dropdown visible> ... </Dropdown>

Placement​

You can set top-center, top-right, top-left, bottom-center, bottom-right and bottom-left to placement property to place the dropdown overlay. By default the placement is bottom-left.

The dropdown is bottom left aligned.

<Dropdown visible placement="bottom-left"> ... </Dropdown>

The dropdown is center aligned.

<Dropdown visible placement="bottom-center"> ... </Dropdown>

The dropdown is bottom right aligned.

<Dropdown visible placement="bottom-right"> ... </Dropdown>

The dropdown is top left aligned.

<Dropdown visible placement="top-left"> ... </Dropdown>

The dropdown is top center aligned.

<Dropdown visible placement="top-center"> ... </Dropdown>

The dropdown is top right aligned.

<Dropdown visible placement="top-right"> ... </Dropdown>

Customize style​

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

API​

The Dropdown component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

The DropdownOverlay component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

The DropdownTrigger component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...

Spotted a bug, have a question, or want to suggest a new feature?

Submit an issue on GitLab