Back to Contextual Menu-guidelines

CSS ComponentThe latest version of this package is: 17.0.1, 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@17.0.1

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

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

Disabled

<li class="if">
  <button tabindex="-1" role="menuitem" class="if" href="asdasd" disabled>Adjust dates</button>
</li>

Parent

<li class="if is-parent right is-active">
  <button tabindex="-1" role="menuitem" class="if" type="button">
    More
  </button>
  <nav
    class="if contextual-menu right is-open"
    tabindex="-1"
    role="menu"
    aria-labelledby="contextual-menu-usage-stances-01-trigger"
    id="contextual-menu-usage-stances-01"
  >
    <ul class="if is-open">
      <li class="if">
        <button tabindex="-1" role="menuitem" class="if" href="asdasd" disabled>Adjust dates</button>
      </li>
      <li class="if">
        <a tabindex="-1" role="menuitem" class="if" href="asdsadsadsa" disabled>
          Send to debt collection
        </a>
      </li>
      <li class="if">
        <button tabindex="-1" role="menuitem" class="if" type="button">
          Add to watch list
        </button>
      </li>
      <li class="if separator"></li>
      <li class="if">
        <button tabindex="-1" role="menuitem" class="if" type="button">Reimburse</button>
      </li>
    </ul>
  </nav>
</li>

Separator

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

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>

Or, you can use an SVG icon

<li class="if">
  <button role="menuitem" type="button" class="if">
    <svg aria-hidden="true" class="if icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><title>settings gear</title><g class="nc-icon-wrapper" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5" fill="#331e11" stroke="#331e11"><circle data-color="color-2" cx="16" cy="16" r="4" fill="none" stroke-miterlimit="10"/> <path d="M27,16a11.057,11.057,0,0,0-.217-2.175L30.49,11.1l-3-5.2L23.263,7.754a10.955,10.955,0,0,0-3.754-2.172L19,1H13l-.509,4.582A10.955,10.955,0,0,0,8.737,7.754L4.51,5.9l-3,5.2,3.707,2.727a11.009,11.009,0,0,0,0,4.35L1.51,20.9l3,5.2,4.227-1.852a10.955,10.955,0,0,0,3.754,2.172L13,31h6l.509-4.582a10.955,10.955,0,0,0,3.754-2.172L27.49,26.1l3-5.2-3.707-2.727A11.057,11.057,0,0,0,27,16Z" fill="none" stroke="#331e11" stroke-miterlimit="10"/></g></svg>
    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"
  role="menuitem"  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
  type="button"
  role="menuitem"  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

Tokens

All of the tokens can be used as preprocessor and CSS variables

Contextual Menu tokens

Name Value Is aliased in
$ids-contextual-menu-menu-list-color-background
rgb(250, 249, 247)
$ids-contextual-menu-border-radius
0.375rem
$ids-contextual-menu-color-background
rgb(250, 249, 247)
$ids-contextual-menu-color-text
rgb(51, 30, 17)
$ids-contextual-menu-button-content-icon-normal-default
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ccircle r=%273%27 cy=%274%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2716%27 cx=%2716%27 stroke-miterlimit=%2710%27 data-color=%27color-2%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2728%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3C/svg%3E")
$ids-contextual-menu-button-content-icon-normal-disabled
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ccircle r=%273%27 cy=%274%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27rgba(110,98,94,0.3)%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2716%27 cx=%2716%27 stroke-miterlimit=%2710%27 data-color=%27color-2%27 fill=%27none%27 stroke=%27rgba(110,98,94,0.3)%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3Ccircle r=%273%27 cy=%2728%27 cx=%2716%27 stroke-miterlimit=%2710%27 fill=%27none%27 stroke=%27rgba(110,98,94,0.3)%27 stroke-width=%271.5%27 stroke-linecap=%27square%27/%3E%3C/svg%3E")
$ids-contextual-menu-button-content-icon-table-default
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 stroke-width=%272%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27%230054f0%27%3E%3Ccircle cx=%274%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2728%27 cy=%2716%27 r=%273%27/%3E%3C/g%3E%3C/svg%3E")
$ids-contextual-menu-button-content-icon-table-disabled
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 stroke-width=%272%27 viewBox=%270 0 32 32%27%3E%3Cg fill=%27rgba(110,98,94,0.3)%27%3E%3Ccircle cx=%274%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2716%27 cy=%2716%27 r=%273%27/%3E%3Ccircle cx=%2728%27 cy=%2716%27 r=%273%27/%3E%3C/g%3E%3C/svg%3E")
$ids-contextual-menu-button-size-icon
1rem 1rem
$ids-contextual-menu-menu-action-content-icon-active
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Echeck%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cpolyline points=%272 16 11 25 30 6%27 fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27/%3E%3C/g%3E%3C/svg%3E")
$ids-contextual-menu-menu-action-content-icon-parent-left
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall left%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cpolyline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 points=%2719,22 13,16 19,10 %27/%3E%3C/g%3E%3C/svg%3E")
$ids-contextual-menu-menu-action-content-icon-parent-right
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ctitle%3Esmall right%3C/title%3E%3Cg class=%27nc-icon-wrapper%27 stroke-linecap=%27square%27 stroke-linejoin=%27miter%27 stroke-width=%271.5%27 fill=%27%23331e11%27 stroke=%27%23331e11%27%3E%3Cpolyline fill=%27none%27 stroke=%27%23331e11%27 stroke-miterlimit=%2710%27 points=%2713,10 19,16 13,22 %27/%3E%3C/g%3E%3C/svg%3E")
$ids-contextual-menu-menu-action-size-height
2rem
$ids-contextual-menu-menu-action-spacing-inset-child
0 1.5rem
$ids-contextual-menu-menu-action-spacing-inset-parent-right
0 3rem 0 1.5rem
$ids-contextual-menu-menu-action-spacing-inset-parent-left
0 1.5rem 0 3rem
$ids-contextual-menu-menu-action-color-text-default
rgb(51, 30, 17)
$ids-contextual-menu-menu-action-color-text-active
rgb(51, 30, 17)
$ids-contextual-menu-menu-action-color-text-disabled
rgb(110, 98, 94)
$ids-contextual-menu-menu-action-color-text-hover
rgb(51, 30, 17)
$ids-contextual-menu-menu-action-color-background-default
rgba(0, 0, 0, 0)
$ids-contextual-menu-menu-action-color-background-active
rgb(232, 224, 217)
$ids-contextual-menu-menu-action-color-background-hover
rgb(232, 224, 217)
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.28.0 (2022-08-22)

Bug Fixes

  • contextual-menu: remove pointer-events:none from disabled state (12d24e3) , closes #629301

14.22.2 (2022-05-03)

Miscellaneous chores

  • package locks: update package locks (813eac7)
  • update deps: package locks updates (38e7a90)

14.20.1 (2022-04-19)

Miscellaneous chores

  • changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
  • changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270

14.19.0 (2022-04-13)

Features

  • 🎸 Add CSS Variables to Contextual Menu (85d9187) , closes #580455 . To ensure support in this component for Dark Mode, and to make it easier for developers to override/create variants/adapt to their theme, we added CSS Variables (and local Design Tokens) to this component.

Code Refactoring

  • 💡 Adjust position of menu action icon (25f2c0b) . The icons in the menu actions were a bit unaligned, even though we centered it vertically. This is due to the line-height used in menu action.

  • 💡 Convert examples in Contextual Menu to use MDX (2d9f3a0) , closes #586087 . We convert the examples and figures to use React components via MDX for a better user experience and for a better maintenance experience for the IDS team.

Miscellaneous chores

  • 🤖 Add .ids-doc CSS flag to generated tokens (610dc05) . This makes it easier to use themes for the IDS components that we use as helpers in our documentation

  • 🤖 Add dev server (187dab7)

  • 🤖 Started to add CSS variables (998a1c6)

14.18.3 (2022-04-13)

Bug Fixes

  • changelog: generate new CHANGELOG.md files for root and packages (349fda4) , closes #586063 . We regenerate the files to include all relevant commits and to use conventional-commits at 100%

14.16.0 (2022-04-07)

Bug Fixes

  • 🐛 Add missing imports for global CSS Variables (fbf6f06) , closes #582437

14.9.0 (2022-03-03)

Miscellaneous chores

14.8.1 (2022-02-23)

Bug Fixes

  • 🐛 Add missing imports of typography CSS variables (e716c65) , closes #559412

reinstall (d425056)

bootstrap (9a713df)

merge (2b1c5f1)

reinstall (5221600)

reinstall (147df55)

  • use correct versions (f1b5deb)

  • Add engines for all packages (e95dfff)

reinstall (afce1f2)

reinstall (67f3140)

  • Add changelog.md to files (3338314)

Reinstall (a2abf51)

14.2.2 (2021-12-10)

Code Refactoring

reinstall (885c74b)

  • fix changelogs manually (b1232b4)

reinstall (545a069)

reinstall (e149c2c)

13.12.3 (2021-11-09)

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

Documentation Updates

  • ✏️ Adjust documentation, examples etc (d161cd3)

  • ✏️ Documentation adjustments (73c09e3) , closes #467386

  • ✏️ Move position of the quick links (5cb0897)

  • ✏️ Remove unneeded margins for shortcuts (36c7e8d)

  • ✏️ Split out CSS and JS implementation docs (bd32bbf) , closes #467386

  • ✏️ Update documentation (b1baa6d)

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

Code Refactoring

  • 💡 Categorize components (9965266) , closes #490579

  • 💡 Reduce spacing tokens, use correct size tokens (97aa461)

  • 💡 Remove manual box-shadow on example (5cd6477)

  • 💡 Rename scope and repository (3ea5423)

  • 💡 Use new navigation structure for documentation (415aee5) , closes #490579

  • another change in the structure (38a0d2e)

Miscellaneous chores

bootstrap (6fc1ed8)

  • fix all old references to util (d57bf17)

  • prepare for merge (0184490)

reinstall (da80dba)

  • Rename scope and repo (257684e)

  • use correct version for utils (49e72d9)

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.7.0 (2021-09-22)

Documentation Updates

  • ✏️ Update linking layout and naming (15c383b)

13.6.3 (2021-09-17)

Bug Fixes

13.6.0 (2021-09-08)

Documentation Updates

  • Use default shortcut listing for demo links (a746602)

  • 🤖 Use node v14 (4009973)

bootstrap (d23e139)

  • 🤖 Use correct order for diff (cc6a4fd)

12.14.1 (2021-08-12)

Miscellaneous chores

  • 🤖 Add ci task to package.json without tests (21222e0) , closes #457627

12.13.1 (2021-08-11)

Bug Fixes

  • 🐛 Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621

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

  • 🤖 Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"

  • 🤖 Reinstall (e660696)

  • 🤖 Update published date (61e7ccf)

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)

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

Code Refactoring

  • 💡 Refactor back support for menu in tables (e347a56)

  • 💡 Refactor+rename overflow menu to contextual menu (70c4044) , closes #336508

  • 💡 Rename and consolidate mixins (67cf470) , closes #268081

Documentation Updates

  • ✏️ Remove "N/A" from empty sections (1e41446)

Miscellaneous chores

  • 🤖 PR fixes (87bdedd)

  • 🤖 Reinstall (2c763ea)

  • 🤖 Update all example references to old menu (81205ad)

rebuild (7edb430)

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