Skip to content

Dropdown Menu13.10.5

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


$ npm i @if-design-system/dropdown-menu@13.10.5

Edit this section

Overview

A Dropdown Menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Edit this section

Behaviours

Interactions

Hover

Hover

When hovered, the menu item is filled with BE 1, DARK BEIGE.

Focus

Focus

3px outline with 1px outline-offset with color BL 1, BLUE Complement, a direct complement color of BL 1, BLUE.

Edit this section

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

Anatomy

Parent menu
  1. Subtle border and shadow
  2. A disabled action (optional)
  3. Hovered menu item
  4. Keyboard shortcut (optional)
  5. A separator (optional)
  6. Default menu item
  7. A parent item (optional)
  8. Action icon (optional)
Sub menu
  1. Sub menu opens up from action
  2. Stronger font for emphasized active item
  3. Check mark for active item

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

Display actions as disabled when they can only be used sometimes, under certain conditions. They should be displayed as disabled rather than removing them.

<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

Menu items can be separated with with a separator, to divide content.

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

Keyboard shortcuts

Keyboard shortcuts can be used for easy access to often used options.

<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

Icons can be added for recognizable actions.

<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

Specs

Edit this section

Implementation

<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>

JavaScript concept

In this example, we use jQuery.menuAim.

$('.if.dropdown-menu:not(.left) > ul').menuAim({
  activate: function(a) {
    $(a)
      .parent()
      .addClass('is-active');
    $(a)
      .find('+ .if.dropdown-menu')
      .addClass('is-open');
    $(a)
      .find('+ .if.dropdown-menu > ul')
      .addClass('is-open');
  },
  deactivate: function(a) {
    $(a)
      .parent()
      .removeClass('is-active');
    $(a)
      .find('+ .if.dropdown-menu')
      .removeClass('is-open');
    $(a)
      .find('+ .if.dropdown-menu > ul')
      .removeClass('is-open');
  },
  submenuDirection: 'right',
  rowSelector: '> li > a, > li > button'
});
$('.if.dropdown-menu.left > ul').menuAim({
  activate: function(a) {
    $(a)
      .parent()
      .addClass('is-active');
    $(a)
      .find('+ .if.dropdown-menu')
      .addClass('is-open');
    $(a)
      .find('+ .if.dropdown-menu > ul')
      .addClass('is-open');
  },
  deactivate: function(a) {
    $(a)
      .parent()
      .removeClass('is-active');
    $(a)
      .find('+ .if.dropdown-menu')
      .removeClass('is-open');
    $(a)
      .find('+ .if.dropdown-menu > ul')
      .removeClass('is-open');
  },
  submenuDirection: 'left',
  rowSelector: '> li > a, > li > button'
});
Edit this section

Contact us