Skip to content
Home

Dropdown

Info
Demos
Properties
Events

Import

import { Dropdown } from '@dnb/eufemia'

Description

The Dropdown component is a fully custom-made component. This allows us to change its form based on context (small screens, touch devices, etc.).

Relevant links

When to use

Use a dropdown when you need to provide many options to the user but don't have space to display them all. The hidden options should only appear when the user requests them, reducing visual clutter.

  1. When space is limited
  2. When you want to reduce visual clutter
  3. When it's intuitive for users to request hidden content

When not to use

  1. Do not use a dropdown if you have only a few options that could be shown using Radio buttons or ToggleButtons.

Note: This pattern can be constructed in various ways to achieve a similar effect—from using the HTML select element to custom building with divs, spans, and JavaScript.

Action menu

The Dropdown component can be used as an action button by setting action_menu={true}. In mobile view, the title/text will be hidden, showing only the icon, and the DrawerList will open from the bottom of the browser.

Menu button

The Dropdown component can be used as a menu button by setting more_menu={true}, which displays the more icon (appears as dots). You can also use prevent_selection={true} together with an empty title title="" and aria-label="Choose an item".

Accessibility

For both the Action Menu and the Menu Button (and when prevent_selection is true), the Dropdown will use role="menu" instead of role="menuitems" for better screen reader support.

Custom size

You can change the width of the Dropdown component with CSS by using:

.dnb-dropdown {
  --dropdown-width: 20rem; /* custom width */
}

You can also set the width directly, but then it has to be defined like so (including min-width):

/** Because of the included label/status etc. we target the "__shell" */
.dnb-dropdown__shell {
  width: 10rem;
}


/** In order to change only the drawer-list width */
.dnb-dropdown .dnb-drawer-list__root {
  width: 10rem;
}


/** If more_menu={true} is used */
.dnb-dropdown--is-popup .dnb-drawer-list__root {
  width: 10rem;
}