Back to Dropdown Menu-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

A Dropdown Menu offers a list of actions, links or functions that a user can access.

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/dropdown-menu@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

<nav class="if dropdown-menu [is-open] [pinned [top|bottom|right|left]] [left|right|center]">
  <ul class="if">
    <li class="if [is-parent] [[left|right|center]]">
      <a tabindex="-1" role="menuitem" class="if" href="asdasd" disabled>Adjust dates</a>
    </li>
    <li class="if separator"></li>
    <li class="if is-parent right">
      <a tabindex="-1" role="menuitem" class="if" href="/">Theme</a>
      <div class="if dropdown-menu [left|right|center]">
        <ul class="if">
          <li class="if">
            <button tabindex="-1" role="menuitem" type="button" data-theme="light" class="if js-toggle-theme is-active">
              Light
            </button>
          </li></ul>
      </div>
    </li></ul>
</nav>

A menu item is the option provided to the user. It can either be a link or a button.

<li class="if">
  <a tabindex="-1" role="menuitem" href="<link>" class="if">Send to debt collection</a>
</li>

Or

<li class="if">
  <button tabindex="-1" role="menuitem" type="button" onClick="" class="if">Send to debt collection</a>
</li>

Parent actions

<li class="if is-parent [if [left|right|center]]">
  <button tabindex="-1" role="menuitem" type="button" class="if is-active">Inverse</button>
</li>

Active actions

<li class="if">
  <button tabindex="-1" role="menuitem" type="button" class="if is-active">Inverse</button>
</li>

Disabled actions

<li class="if">
  <button tabindex="-1" role="menuitem" type="button" disabled class="if">Reimburse</button>
</li>
<li class="if">
  <a tabindex="-1" role="menuitem" href disabled class="if">Reimburse</a>
</li>

Separators

<li class="if separator"></li>

Keyboard shortcuts

<li class="if">
  <button tabindex="-1" role="menuitem" type="button" onClick="" class="if">
    Save<span class="if keyboard-shortcut"><kbd class="if"></kbd>+<kbd class="if">s</kbd></span>
  </button>
</li>

Icons

<li class="if">
  <button tabindex="-1" role="menuitem" class="if" type="button">
    <span aria-hidden="true" class="if icon ui log-out"></span>Sign out
  </button>
</li>
Edit this section, Opens in new window

Accessibility

Remember to use the correct role, aria- and html-attributes for the menu options.

<nav class="if dropdown-menu is-open" tabindex="-1" role="menu" aria-labelledby="menu-0123-trigger" id="menu-0123">
  <ul class="if is-open">
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" type="button">Reimburse</button>
    </li>
  </ul>
</nav>

When the user navigates the Dropdown Menu with arrow keys, update the selected state with aria-selected.

if (e.key == 'ArrowUp') {
  nextElement = allOptions[--indexOfOptions];
  if (!nextElement) {
    indexOfOptions = allOptions.length - 1;
    nextElement = allOptions[indexOfOptions];
  }

  removePreviouslySelectedMenuItem(menuList);
  nextElement.classList.add('is-focused');
  nextElement.setAttribute('aria-selected', true);
} else if (e.key == 'ArrowDown') {
  nextElement = allOptions[++indexOfOptions];
  if (!nextElement) {
    indexOfOptions = 0;
    nextElement = allOptions[indexOfOptions];
  }
  removePreviouslySelectedMenuItem(menuList);
  nextElement.classList.add('is-focused');
  nextElement.setAttribute('aria-selected', true);
}
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.0 (2021-11-09)

chore

  • 🤖 Rename util to utils (f78721f)

Code Refactoring

  • 💡 Rename scope and repository (3ea5423)
  • 💡 Split out CSS and JS documentation, js to ids-js (8645212), closes #467386
  • 💡 Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • ✏️ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • 🧨 The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • 🧨 Util is now renamed to Utils
  • 🧨 We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • 🧨 Navigation structure has now changed. Please see release notes!
  • 🧨 The required JavaScript for the Dropdown Menu Component is now in a

separate package, @ids-js/dropdown-menu

13.11.0 (2021-10-19)

Features

  • 🎸 Input field hot reload (eac76b7)

13.9.2 (2021-09-30)

Bug Fixes

  • 🐛 Complete the pseudo-element fix (1dcee2c)

13.6.3 (2021-09-17)

Bug Fixes

13.6.1 (2021-09-15)

Bug Fixes

  • 🐛 Adjust icon margin in dropdown menu (512d1d8)

12.13.1 (2021-08-11)

Bug Fixes

12.13.0 (2021-08-11)

Bug Fixes

12.12.1 (2021-08-10)

Bug Fixes

  • 🐛 Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • 🐛 Manually set firstPublished and lastModified (e83af7d)
  • 🐛 We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

  • 💡 Refactor & rename application menu - dropdown menu (d92f3bf), closes #336508
  • 💡 Rename and consolidate mixins (67cf470), closes #268081

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Application Menu is now extracted and renamed to Dropdown Menu
Edit this section, Opens in new window
Contact us, Opens in new window