Skip to content

Soracom

Design System
Home Design System Elements Menu

Menu

Menu displays a list of menu items

The ds-menu component can be used directly on page, or as part of ds-menubutton.

Options 

Basic usage 

Basic usage - anchor elements
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
Basic usage - button elements
<div class="ds-menu">
  <ul>
    <li>
      <button>Change email</button>
    </li>
    <li>
      <button>Contact information</button>
    </li>
    <li>
      <button>Billing</button>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <button>Change email</button>
    </li>
    <li>
      <button>Contact information</button>
    </li>
    <li>
      <button>Billing</button>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
</div>

Selected menu items 

To highlight the currently selected menu item, either add the class ds-menu__item--selected or if you are using ARIA attributes you can use aria-selected="true".

Highlight selected item with class
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
Highlight selected item with ARIA attribute
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" aria-selected="true">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" aria-selected="true">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>

Disabled menu items 

Any button element with a disabled attribute, or any a element with href="" (empty value), href (with no value) or missing href will be displayed as disabled.

Disabled menu items
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
    <li>
      <a href="">Disabled item</a>
    </li>
    <li>
      <a href>Disabled item</a>
    </li>
    <li>
      <button disabled>Disabled item</button>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
    <li>
      <a href="">Disabled item</a>
    </li>
    <li>
      <a href>Disabled item</a>
    </li>
    <li>
      <button disabled>Disabled item</button>
    </li>
  </ul>
</div>

Dividers 

Adjacent html ul elements will automatically be visually displayed with a divider.

Grouped list dividers
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Account settings</a>
    </li>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
  </ul>
  <ul>
    <li>
      <button>Billing</button>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
  <ul>
    <li><a href="#">Logout</a></li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Account settings</a>
    </li>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
  </ul>
  <ul>
    <li>
      <button>Billing</button>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
  <ul>
    <li><a href="#">Logout</a></li>
  </ul>
</div>

Menu headers can be introduced by using ds-text components.

<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#">Account settings</a>
    </li>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
  </ul>
  <div class="ds-text --label">Payment</div>
  <ul>
    <li>
      <button>Billing</button>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#">Account settings</a>
    </li>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
  </ul>
  <div class="ds-text --label">Payment</div>
  <ul>
    <li>
      <button>Billing</button>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

Collapsible sub menus can be displayed by using html <details> element

<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#">Account settings</a>
    </li>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
  </ul>
  <details>
    <summary class="ds-text --label">Payment</summary>
    <ul>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <button>Payment settings</button>
      </li>
    </ul>

  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>
<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#">Account settings</a>
    </li>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Contact information</a>
    </li>
  </ul>
  <details>
    <summary class="ds-text --label">Payment</summary>
    <ul>
      <li>
        <a href="#">Billing</a>
      </li>
      <li>
        <button>Payment settings</button>
      </li>
    </ul>

  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

Width 

Narrow, mid, wide 

ds-menu at default, narrow, mid and wide sizes
<!-- 1. Default -->
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 2. ds-menu --narrow -->
<div class="ds-menu --narrow">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 3. ds-menu --mid -->
<div class="ds-menu --mid">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 4. ds-menu --wide -->
<div class="ds-menu --wide">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 1. Default -->
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 2. ds-menu --narrow -->
<div class="ds-menu --narrow">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 3. ds-menu --mid -->
<div class="ds-menu --mid">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<!-- 4. ds-menu --wide -->
<div class="ds-menu --wide">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings and features</span></a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>

Height 

By default the menu will be the height of the menu contents. You can also restrict the overall height of the menu and cause the contents to scroll. If the menu can scroll, a shadow will be added at the bottom/top of the menu to indicate the menu is scrollable.

You can apply these settings to either a ds-menubutton or to a standalone ds-menu component.

There are two ways to restrict the height.

Restrict the height to the viewport 

Adding the class --viewport will restrict the height to 100vh - --ds-header-height (usually 100vh - 60px) and force the menu to scroll.

Using viewport height - if the browser height is less than the menu height, the menu will scroll
<div class="ds-menu --viewport --mid" >
  <ul>
    <li>
      <a href="#">Details</a>
    </li>
    <li>
      <a href="#">Activate</a>
    </li>
    <li>
      <a href="#">Deactivate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Add subscription...</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Delete session</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change group</a>
    </li>
    <li>
      <a href="#">Change speed class</a>
    </li>
    <li>
      <a href="#">Change expiry</a>
    </li>
    <li>
      <a href="#">Enable IMEI lock</a>
    </li>
    <li>
      <a href="#">Unset IMEI lock</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Check logs</a>
    </li>
    <li>
      <a href="#">Harvest data</a>
    </li>
    <li>
      <a href="#">Send SMS</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">On-demand Remote Access</a>
    </li>
    <li>
      <a href="#">Packet capture</a>
    </li>
    <li>
      <a href="#">Send ping message</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Run diagnostics</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change termination protection</a>
    </li>
    <li>
      <a href="#">Set to Standby</a>
    </li>
    <li>
      <a href="#">Suspend</a>
    </li>
    <li>
      <a href="#">Terminate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Transfer to another operator</a>
    </li>
    <li>
      <a href="#">Cancel transfer</a>
    </li>
  </ul>
</div>

Restrict the height to a specific size 

You can restrict the height by changing the --ds-menu-height value (either in a css file, inline style tag or via javascript).

Setting a height using javascript
let myCustomMenu = document.getElementById("customMenu")
myCustomMenu.style.setProperty('--ds-menu-height', "400px")
Setting a height using inline style tag
<div class="ds-menu --mid" style="--ds-menu-height: 400px;">
  <ul>
    <li>
      <a href="#">Details</a>
    </li>
    <li>
      <a href="#">Activate</a>
    </li>
    <li>
      <a href="#">Deactivate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Add subscription...</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Delete session</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change group</a>
    </li>
    <li>
      <a href="#">Change speed class</a>
    </li>
    <li>
      <a href="#">Change expiry</a>
    </li>
    <li>
      <a href="#">Enable IMEI lock</a>
    </li>
    <li>
      <a href="#">Unset IMEI lock</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Check logs</a>
    </li>
    <li>
      <a href="#">Harvest data</a>
    </li>
    <li>
      <a href="#">Send SMS</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">On-demand Remote Access</a>
    </li>
    <li>
      <a href="#">Packet capture</a>
    </li>
    <li>
      <a href="#">Send ping message</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Run diagnostics</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change termination protection</a>
    </li>
    <li>
      <a href="#">Set to Standby</a>
    </li>
    <li>
      <a href="#">Suspend</a>
    </li>
    <li>
      <a href="#">Terminate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Transfer to another operator</a>
    </li>
    <li>
      <a href="#">Cancel transfer</a>
    </li>
  </ul>
</div>

Icons can be applied to each menu item using ds-text--icon-*.

If an anchor in a menu item has a target="_blank" attribute, the menu item will automatically display the --icon-external-link icon.
If a button in a menu item has a formtarget="_blank" attribute, the menu item will automatically display the --icon-external-link icon.
<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-signin">Change email</a>
    </li>
    <li>
      <button class="ds-text --icon-user">Contact information</button>
    </li>
    <li>
      <button class="ds-text --icon-support" formtarget="_blank">Account support</button>
    </li>
  </ul>
  <div class="ds-text --label">Payment</div>
  <ul>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
    <li>
      <a href="#" target="blank">Payment information</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings</a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-signin">Change email</a>
    </li>
    <li>
      <button class="ds-text --icon-user">Contact information</button>
    </li>
    <li>
      <button class="ds-text --icon-support" formtarget="_blank">Account support</button>
    </li>
  </ul>
  <div class="ds-text --label">Payment</div>
  <ul>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
    <li>
      <a href="#" target="blank">Payment information</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

Descriptive text can be added to each menu item by including an html span element

<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings</span></a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-signin">Change email<span>Update your login email</span></a>
    </li>
    <li>
      <button class="ds-text --icon-user">Contact information<span>Update contact information</span></button>
    </li>
  </ul>
  <div class="ds-text --label">Payment</div>
  <ul>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <div class="ds-text --label">Account</div>
  <ul>
    <li>
      <a href="#" class="ds-text --icon-settings">Account settings<span>Manage account settings</span></a>
    </li>
    <li>
      <a href="#" class="ds-text --icon-signin">Change email<span>Update your login email</span></a>
    </li>
    <li>
      <button class="ds-text --icon-user">Contact information<span>Update contact information</span></button>
    </li>
  </ul>
  <div class="ds-text --label">Payment</div>
  <ul>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button>Payment settings</button>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

Notification indicator 

A menu item can display a notification indicator (dot) by adding the class __item --notification.

<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="__item --notification">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button class="ds-menu__item --notification">Payment settings</button>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="__item --notification">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button class="ds-menu__item --notification">Payment settings</button>
    </li>
  </ul>
</div>

Additionally, if the menu item has an attribute data-notification-counter set to a non-empty value, that value will be shown in the indicator. If the attribute is set to empty data-notification-counter="" the indicator dot will be hidden.

<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--notification" data-notification-counter="3">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button class="ds-menu__item--notification" data-notification-counter="1">Payment settings</button>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--notification" data-notification-counter="3">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <button class="ds-menu__item--notification" data-notification-counter="1">Payment settings</button>
    </li>
  </ul>
</div>

Styles 

Simple style 

<div class="ds-menu --simple">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu --simple">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
<div class="ds-menu --dropdown">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu --dropdown">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>

Compact style 

<div class="ds-menu --compact">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu --compact">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Billing</a>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>

Table of Contents style 

<div class="ds-menu --toc">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Accessibility</a>
      <ul>
        <li>
          <a href="#">Role and ARIA attributes</a>
        </li>
        <li>
          <a href="#">Keyboard access</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu --toc">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__item--selected">Contact information</a>
    </li>
    <li>
      <a href="#">Accessibility</a>
      <ul>
        <li>
          <a href="#">Role and ARIA attributes</a>
        </li>
        <li>
          <a href="#">Keyboard access</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Payment settings</a>
    </li>
  </ul>
</div>

Accessibility 

When used directly on page, this component is accessible. When used inside ds-menubutton, additional accessibility and keyboard support is required.

Role and ARIA attributes 

See above

Keyboard access 

When used directly on page this component can be selected using the browsers native tab and shift-tab keyboard command and enter to activate the selected item.

References 

Examples 

Compact dropdown with scrolling
<div class="ds-menu --mid --dropdown --compact" style="--ds-menu-height: 600px;">
  <ul>
    <li>
      <a href="#">Details</a>
    </li>
    <li>
      <a href="#">Activate</a>
    </li>
    <li>
      <a href="#">Deactivate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Add subscription...</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Delete session</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change group</a>
    </li>
    <li>
      <a href="#">Change speed class</a>
    </li>
    <li>
      <a href="#">Change expiry</a>
    </li>
    <li>
      <a href="#">Enable IMEI lock</a>
    </li>
    <li>
      <a href="#">Unset IMEI lock</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Check logs</a>
    </li>
    <li>
      <a href="#">Harvest data</a>
    </li>
    <li>
      <a href="#">Send SMS</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">On-demand Remote Access</a>
    </li>
    <li>
      <a href="#">Packet capture</a>
    </li>
    <li>
      <a href="#">Send ping message</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Run diagnostics</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change termination protection</a>
    </li>
    <li>
      <a href="#">Set to Standby</a>
    </li>
    <li>
      <a href="#">Suspend</a>
    </li>
    <li>
      <a href="#">Terminate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Transfer to another operator</a>
    </li>
    <li>
      <a href="#">Cancel transfer</a>
    </li>
  </ul>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-menu --mid --dropdown --compact" style="--ds-menu-height: 600px;">
  <ul>
    <li>
      <a href="#">Details</a>
    </li>
    <li>
      <a href="#">Activate</a>
    </li>
    <li>
      <a href="#">Deactivate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Add subscription...</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Delete session</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change group</a>
    </li>
    <li>
      <a href="#">Change speed class</a>
    </li>
    <li>
      <a href="#">Change expiry</a>
    </li>
    <li>
      <a href="#">Enable IMEI lock</a>
    </li>
    <li>
      <a href="#">Unset IMEI lock</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Check logs</a>
    </li>
    <li>
      <a href="#">Harvest data</a>
    </li>
    <li>
      <a href="#">Send SMS</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">On-demand Remote Access</a>
    </li>
    <li>
      <a href="#">Packet capture</a>
    </li>
    <li>
      <a href="#">Send ping message</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Run diagnostics</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Change termination protection</a>
    </li>
    <li>
      <a href="#">Set to Standby</a>
    </li>
    <li>
      <a href="#">Suspend</a>
    </li>
    <li>
      <a href="#">Terminate</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">Transfer to another operator</a>
    </li>
    <li>
      <a href="#">Cancel transfer</a>
    </li>
  </ul>
</div>