A Polymer-based web component for menus.
d2l-menu can be installed from Bower:
bower install d2l-menuInclude the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the opener and content components as needed:
<head>
<script src="https://s.brightspace.com/lib/webcomponentsjs/0.7.21/webcomponents-lite.min.js"></script>
</head>A basic menu can be defined using d2l-menu and a combination of d2l-menu-item and d2l-menu-item-link. Important: specify a label on your d2l-menu for screen-readers.
<link rel="import" href="../d2l-menu/d2l-menu.html">
<link rel="import" href="../d2l-menu/d2l-menu-item.html">
<d2l-menu label="Astronomy">
<d2l-menu-item text="Introduction"></d2l-menu-item>
<d2l-menu-item text="Searching the Heavens"></d2l-menu-item>
...
</d2l-menu>label- required to announce menu text with screen-readers
Note: d2l-menu renders without an outer border since it's typically used in a context where a containing element defines a border (ex. d2l-dropdown-menu or side nav).
Nested menus can be defined by placing a d2l-menu inside a d2l-menu-item. For nested menus, a label attribute is automatically applied using the text attribute of the d2l-menu-item that contains it - no need to duplicate this value. A "return" menu item will be added to the top of the nested menu by default.
<link rel="import" href="../d2l-menu/d2l-menu.html">
<link rel="import" href="../d2l-menu/d2l-menu-item.html">
<d2l-menu label="Astronomy">
...
<d2l-menu-item text="The Planets">
<d2l-menu>
<d2l-menu-item text="Mercury"></d2l-menu-item>
<d2l-menu-item text="Venus"></d2l-menu-item>
<d2l-menu-item text="Earth"></d2l-menu-item>
...
</d2l-menu>
</d2l-menu-item>
...
</d2l-menu>By default, d2l-menu-item (for JS handlers) and d2l-menu-item-link (for navigating) are provided. While navigation can be done in JS too, d2l-menu-item-link gives users the ability to right-click and open in a new tab. If providing a JS handler, wire-up to the select event. In addition, a d2l-menu-item-separator can be used to semantically separate menu items.
<link rel="import" href="../d2l-menu/d2l-menu.html">
<link rel="import" href="../d2l-menu/d2l-menu-item.html">
<link rel="import" href="../d2l-menu/d2l-menu-item-link.html">
<link rel="import" href="../d2l-menu/d2l-menu-item-separator.html">
<d2l-menu id="menu" label="Astronomy">
<d2l-menu-item text="Introduction"></d2l-menu-item>
<d2l-menu-item text="The Planets"></d2l-menu-item>
<d2l-menu-item-separator></d2l-menu-item-separator>
<d2l-menu-item-link href="http://...">Extra Stuff</d2l-menu-item-link>
<d2l-menu-item-link href="http://..." prevent-default>Will not open automatically</d2l-menu-item-link>
</d2l-menu>text- required ford2l-menu-itemhref- required ford2l-menu-item-linkprevent-default- optional ford2l-menu-item-link- disables normal link behavior. This can help if you want both a JS handler and the browser's 'open in new tab' functionality (e.g. popup window links).
menu.addEventListener('select', function(e) {
console.log('item selected:', e);
});In production, it's recommended to use a build tool like Vulcanize to combine all your web components into a single import file. More from the Polymer Docs: Optimize for Production...
See the VUI Best Practices & Style Guide for information on VUI naming conventions, plus information about the EditorConfig rules used in this repo.