Skip to content
MENU

Soracom

Design System

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

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

Menu headers
<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>
Account
Payment
<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

Sub menus (click sub menu to view contents)
<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>
  </details>
  <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>
  </details>
  <ul>
    <li>
      <a href="#">Logout</a>
    </li>
  </ul>
</div>

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

Menu icons
<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-basic-user">Contact information</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>
Account
Payment
<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-basic-user">Contact information</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>

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

Menu items descriptions
<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-basic-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>
Account
Payment
<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-basic-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 ds-menu__item--notification.

<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__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>
<div class="ds-menu">
  <ul>
    <li>
      <a href="#">Change email</a>
    </li>
    <li>
      <a href="#" class="ds-menu__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>
<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>

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