Skip to content

Dropdown

Description

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

When to use it:

When you need to provide a considerable amount of options to the user and do not have the space to do so. Other reasons may be because the hidden options may clutter the interface and need only be displayed after the user specifically requests it.

  1. when space is an issue (not enough)
  2. when you wish to reduce visual clutter
  3. when it is intuitive for the user to request the hidden content

When not to use it:

  1. do not use this if you have only a few 'menu' options which could otherwise be shown such as tabs or buttons

NB: This pattern can be constructed in a number of ways to achieve a similar effect - from using the HTML 'select' element to custom building with divs, spans and javascript.

Custom size

Changing the width of the Dropdown component by CSS is easy done by doing:

.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):

.dnb-dropdown__shell {
width: 20rem; /* custom width */
}
.dnb-dropdown__list {
min-width: 20rem; /* custom width */
}

Demos

Default dropdown, with long list to make it scrollable and searchable

Default dropdown - no value is defined, but a title is given.

Default dropdown, icon on left side

As Popup Menu - no lasting selection will be made

Disabled dropdown

Message to the user

Dropdown with status and vertical label layout

  • Brukskonto - Kari Nordmann
  • 1234 56 78902Sparekonto - Ole Nordmann
  • 1134 56 78962Feriekonto - Kari Nordmann med et kjempelangt etternavnsen
  • 1534 96 48901Oppussing - Ole Nordmann

Dropdown list - only to vissualize