JSPM – @workday/canvas-kit-css-menu@3.0.0-alpha.3

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.

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. This can be used in conjunction with any directional modifiers.

<div class="wdc-menu">
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>Item 2</li>
  </ul>
</div>

Directional Modifiers

Four directions are available. Each direction will change the orientation of the menu arrow. Use directional classes in addition to .wdc-menu.

.wdc-menu-right
.wdc-menu-left
.wdc-menu-top
.wdc-menu-bottom

<div class="wdc-menu wdc-menu-right">
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>Item 2</li>
  </ul>
</div>
<div class="wdc-menu wdc-menu-left">
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>Item 2</li>
  </ul>
</div>
<div class="wdc-menu wdc-menu-top">
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>Item 2</li>
  </ul>
</div>
<div class="wdc-menu wdc-menu-bottom">
  <ul>
    <li>
      <a href="#">Item 1</a>
    </li>
    <li>Item 2</li>
  </ul>
</div>

Display on hover

To display a menu on hover, wrap hoverable content within a .wdc-menu-container. Insert a .wdc-menu within the container. The menu will automatically be positioned according to its directional modifier.

A directional modifier is required for proper usage.

<div class="wdc-menu-container">
  Left menu
  <div class="wdc-menu wdc-menu-left">
    <ul>
      <li>
        <a href="#">Item 1</a>
      </li>
      <li>Item 2</li>
    </ul>
  </div>
</div>

@workday/canvas-kit-css-menu