JSPM

Package Exports

@workday/canvas-kit-css-menu

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-css-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Creates an actions menu of clickable items.

Can be used to implement a menu button, context menu, etc.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-css

yarn add @workday/canvas-kit-css-menu

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-menu/index.scss';

Usage

Menu renders Canvas-style menu list.

Use .wdc-menu to create a menu.

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem">
      <a href="#">Item 1</a>
    </li>
    <li role="menuitem">Item 2</li>
  </ul>
</div>

Variants

Grow

Use .wdc-menu-grow to expand the menu to fit its container.

<div class="wdc-menu wdc-menu-grow" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem">This menu will expand to fit its container</li>
  </ul>
</div>

Use .wdc-menu-item-disabled to create a disabled menu item.

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem" class="wdc-menu-item-disabled" aria-disabled="true">
      Disabled item
    </li>
  </ul>
</div>

Use .wdc-menu-item-focused to create a focused menu item.

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem" class="wdc-menu-item-focused">
      Focused item
    </li>
  </ul>
</div>

Menu item modifiers may be combined.

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem" class="wdc-menu-item-disabled wdc-menu-item-focused">
      Disabled and focused item
    </li>
  </ul>
</div>

Icons

Menu items can include an icon as well as a secondary icon.

Wrap the text for the menu item using a <span> with .wdc-menu-item-label.

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem">
      <i class="wdc-icon" data-icon="uploadCloud" data-category="system" />
      <span class="wdc-menu-item-label">Item with uploadCloud icon</span>
    </li>
    <li role="menuitem">
      <i class="wdc-icon" data-icon="uploadCloud" data-category="system" />
      <span class="wdc-menu-item-label">
        Item with uploadCloud icon and an extLink secondary icon
      </span>
      <i class="wdc-icon" data-icon="extLink" data-category="system" />
    </li>
  </ul>
</div>

If you're generating the icons using the React SystemIcon component, you'll need to assign .wdc-menu-item-icon to the icons.

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem">
      <SystemIcon icon={uploadCloudIcon} class="wdc-menu-item-icon" />
      <span class="wdc-menu-item-label">Item with uploadCloud icon</span>
    </li>
  </ul>
</div>

Divider

Use <hr /> to create a divider between menu items (use role="separator" for accessibility).

<div class="wdc-menu" role="menu" aria-label="Menu">
  <ul>
    <li role="menuitem">Item 1</li>
    <hr role="separator" />
    <li role="menuitem">Item 2</li>
  </ul>
</div>

Accessibility note

Container with role="menu" should always have an aria-labelledby or aria-label attribute.

@workday/canvas-kit-css-menu