Back to Contextual Menu-guidelines

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

A Contextual Menu is a menu to gather options for a context, or when navigational control are truncated.

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/contextual-menu@14.1.0

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

The Contextual Menu is always triggered form an icon button/control.

<nav class="if contextual-menu" role="menu">
  <ul class="if">
    <li class="if">
      <a role="menuitem" class="if" href="/develop">
        Develop
      </a>
    </li>
    <li class="if">
      <a role="menuitem" class="if" href="/develop">
        Resources
      </a>
    </li>
    <li class="if is-parent">
      <a role="menuitem" href="/asd" class="if">
        Introduction
      </a>
      <div class="if contextual-menu">
        <ul class="if">
          <li class="if">
            <a role="menuitem" href="/asdasd" class="if">
              <span class="if icon ui house"></span>
              Concept - Simply Personal
            </a>
          </li>
          <li class="if">
            <a role="menuitem" href="/asdasd" class="if">
              The If Visual Identity at a glance
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Icon on menu item

<li class="if">
  <button role="menuitem" type="button" class="if">
    <span aria-hidden="true" class="if icon ui house"></span>
    Hem
  </button>
</li>
Edit this section, Opens in new window

Accessibility

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

Closed menu

<button
  type="button"
  aria-expanded="false"
  aria-haspopup="true"
  aria-controls="<id-for-menu-to-toggle>"
  id="<id-for-menu-initiator>"
  class="if …"
></button>
<nav
  class="if contextual-menu"
  tabindex="-1"
  role="menu"
  aria-labelledby="<id-for-menu-initiator>"
  id="<id-for-menu-to-toggle>"
>
  <ul class="if">
    <li class="if">
      <button tabindex="-1" role="menuitem" class="if" type="button"></button>
    </li>
  </ul>
</nav>
Closed menu

Here you see the markup of a closed menu. We have included a menu initiator in the markup to couple tings together.

The initiator

  • Has aria-expanded, which is toggled depending on the state; set to false
  • Has aria-haspopup to indicate that this initiator has a popup/menu associated with it.
  • Has aria-controls to reference the menu that the initiator controls. This must be an unique identifier, and the same value as the id of the menu.
  • id is used as reference for the menu.

The menu holder

  • Has tabindex="-1", because it is not opened yet, and we do not want the user to tab into it yet.
  • Has role set to menu, to get the semantics in order and to indicate that this is a menu.
  • Has aria-labelledby, to reference the element that is used as the label for this menu.

The menu action

  • Has tabindex="-1", because it is not available yet, and we do not want the user to tab into it yet.
  • Has role set to menuitem, to get the semantics in order and to indicate that this is a menu item.
<button
  role="menuitem"
  type="button"
  aria-expanded="true"
  aria-haspopup="true"
  aria-controls="<id-for-menu-to-toggle>"
  id="<id-for-menu-initiator>"
  class="if …"
></button>
<nav
  class="if contextual-menu is-open"
  role="menu"
  aria-labelledby="<id-for-menu-initiator>"
  id="<id-for-menu-to-toggle>"
>
  <ul class="if is-open">
    <li class="if">
      <button role="menuitem" class="if" type="button"></button>
    </li>
  </ul>
</nav>
Opened menu

Here you see the markup of an opened menu. We have included a menu initiator in the markup to couple tings together.

We only cover the changed attributes here.

The initiator

  • Has aria-expanded, which is toggled depending on the state; set to true

The menu holder

  • Has tabindex="-1" removed, since the menu is now open

The menu action

  • Has tabindex="-1" removed, since the menu is now open
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)
  • 💡 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!

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

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 overflow menu to contextual menu (70c4044), closes #336508
  • 💡 Rename and consolidate mixins (67cf470), closes #268081

BREAKING CHANGES

  • 🧨 All of the mixins have now been renamed
  • 🧨 Overflow Menu is now known as Contextual Menu and it is a separate

component. The Menu Component is now obliterated.

Edit this section, Opens in new window
Contact us, Opens in new window