Overlays

Dropdown menu

A list of actions that opens from a button, or from a right click anywhere in an area.

From a button

HTML

<button class="pw-btn" data-pw-menu="#demo-menu">Options</button>

<div class="pw-menu" id="demo-menu" hidden>
  <button>Rename <kbd>F2</kbd></button>
  <button>Duplicate</button>
  <a href="#demo-menu">Open in a new tab</a>
  <hr>
  <div class="pw-menu-label">View</div>
  <button role="menuitemcheckbox" aria-checked="true" data-keep-open>Show grid</button>
  <button role="menuitemradio" aria-checked="true" data-group="size" data-keep-open>Small</button>
  <button role="menuitemradio" aria-checked="false" data-group="size" data-keep-open>Large</button>
  <hr>
  <button disabled>Archive</button>
  <button class="pw-menu-danger">Delete</button>
</div>
<p class="demo-out" id="demo-menu-out"></p>

JavaScript

document.getElementById('demo-menu').addEventListener('pw:select', function (e) {
  document.getElementById('demo-menu-out').textContent = 'You chose: ' + e.detail.value;
});

Context menu

Right click in the area, or press and hold on a touch screen. With the keyboard: focus the area and press the Menu key or Shift + F10.

Right click here

HTML

<div class="demo-area" tabindex="0" data-pw-context="#demo-context">Right click here</div>

<div class="pw-menu" id="demo-context" aria-label="File actions" hidden>
  <button>Copy</button>
  <button>Paste</button>
  <hr>
  <button>Download</button>
</div>

Where it opens

data-place on the menu sets the side. If there is no room, it flips to the other side.

HTML

<button class="pw-btn" data-pw-menu="#demo-menu-end">Bottom end</button>
<button class="pw-btn" data-pw-menu="#demo-menu-top">Top start</button>
<button class="pw-btn" data-pw-menu="#demo-menu-right">Right</button>

<div class="pw-menu" id="demo-menu-end" data-place="bottom-end" hidden><button>Profile</button><button>Settings</button><button>Sign out</button></div>
<div class="pw-menu" id="demo-menu-top" data-place="top-start" hidden><button>Profile</button><button>Settings</button><button>Sign out</button></div>
<div class="pw-menu" id="demo-menu-right" data-place="right-start" hidden><button>Profile</button><button>Settings</button><button>Sign out</button></div>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-pw-menu`		On the button: the selector of the menu.
`data-pw-context`		On an area: the selector of its context menu.
`data-place`	`bottom-start`	On the menu: `top`, `bottom`, `left` or `right`, plus `-start` or `-end`.
`data-keep-open`		On an item: the menu stays open after a click.
`data-value`		On an item: the value sent with `pw:select`. Without it, the text of the item.
`data-group`		On radio items: items with the same group switch each other off.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:select`	On the menu, with `item`, `value` and `checked`.
`pw:open, pw:close`	On the menu.
`pw:context`	On the area, with the point `x`, `y`.

From your script

Partwise.menu.open('#demo-menu', buttonElement);
Partwise.menu.open('#demo-context', { x: 200, y: 120 });   // at a point
Partwise.menu.close();

Keyboard

Key	Action
`Down` `Up`	Next and previous item. On the button: open the menu.
`Home` `End`	First and last item
`A-Z`	Jump to the item that starts with the letters you type
`Enter` `Space`	Choose
`Esc`	Close and go back to the button
`Tab`	Close and move on

Good to know

Items are plain <button> and <a> elements. The script adds the menu roles.
One menu is open at a time.
Menus have one level. There are no submenus.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/13-menu.css, js/13-menu.js.