R A D I U S

The React documentation for this component can be read from Storybook (link here)

Dropdown

Use to summon options that are related to a single theme or concept that would be too numerous to list in view all at once.

Description

It consists of a clickable toggle and a hidden dropdown window which holds the additional content. Clicking the toggle element(the one visible on the page) will make the dropdown window appear. In some contexts, the dropdown component contains an icon in front of each option. In this case the component requires the modifier class: dropdown--with-icons responsible for maintaing the space consistent between the icon and the dropdown option. The component makes use of the toggler functionality which can be found here: globals/js/toggle.

Environment specific behaviour:

When JavaScript is not available the hidden content in the dropdown window will not be visible.

Data attributes:

[data-js-toggle]: This attribute should be added to the dropdown wrapper.
[data-js-toggle-switch]: This attribute should be added to the element responsible for toggling the dropdown window display.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-dropdown;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Code example

<div class="col-s-wrapper u-page-grid u-text-center">
  <div class="col-s-1">
    <!-- Component markup -->
    <div class="dropdown dropdown--with-icons" data-js-toggle>
      <div tabindex="0" class="dropdown__selected-option" data-js-toggle-switch>
        <img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/uk-flag.svg" alt="">
        <span class="dropdown__selected-item">United Kingdom</span>
        <svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Arrow down</title><path d="M8 11.487L9.487 10 14 5.487 12.514 4 8 8.513 3.487 4 2 5.487 6.514 10" fill-rule="nonzero" /></svg>
      </div>
      <ul class="dropdown__menu">
        <li>
          <a class="dropdown__menu-item" href="/ca/">
            <img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/ca-flag.svg" alt="">
            <span>Canada</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/de/">
            <img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/de-flag.svg" alt="">
            <span>Germany</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/nl/">
            <img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/nl-flag.svg" alt="">
            <span>The Netherlands</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/uk/">
            <img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/uk-flag.svg" alt="">
            <span>United Kingdom</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/us/">
            <img class="dropdown__icon" src="https://dgnvhpcjbd3ba.cloudfront.net/radius/15.3.16/flags/us-flag.svg" alt="">
            <span>United States</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- End of component markup -->
  </div>
  <div class="col-s-1">
    <!-- Component markup -->
    <div class="dropdown" data-js-toggle>
      <div tabindex="0" class="dropdown__selected-option" data-js-toggle-switch>
        <span class="dropdown__selected-item">Selected option</span>
        <svg class="icon icon--small" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Arrow down</title><path d="M8 11.487L9.487 10 14 5.487 12.514 4 8 8.513 3.487 4 2 5.487 6.514 10" fill-rule="nonzero" /></svg>
      </div>
      <ul class="dropdown__menu">
        <li>
          <a class="dropdown__menu-item" href="/">
            <span>Option one</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/">
            <span>Option two</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/">
            <span>Option three</span>
          </a>
        </li>
        <li>
          <a class="dropdown__menu-item" href="/">
            <span>Option 4</span>
          </a>
        </li>
      </ul>
    </div>
    <!-- End of component markup -->
  </div>
</div>