Nested Menu

Abstract
The rwt-nested-menu DOM component is an expandable dropdown navigation panel, displayed in multi-column fashion, with items grouped into two levels.

Motivation

Sometimes you need to provide your website visitors with quick access to a large quantity of pages without cluttering the main reading area of the page.

The rwt-nested-menu DOM component does this by keeping a menu collapsed at the top of the page until the user needs it.

When the menu is activated, it opens up as a multi-column panel, where the number of columns is automatically adjusted to match the space available and the number of configured items.

Activation may also be initiated through the component's toggleMenu method or through its event interface.

The component has these features:

• First level menu items are shown by default. Second level menu items are shown when the user selects a first-level item.
• The menu has both a keyboard and mouse interface, with no risk of loosing focus when the mouse leaves the menu area.
• The actual menu items are kept separate from the DOM component, allowing the webmaster to change its contents in a single centralized place.
• The menu item corresponding to the current document is highlighted when the collapsed menu is first expanded.
• The menu has an event interface for showing and hiding itself.
• The menu emits a custom event to close sibling menus and dialog boxes, so that only one is open at a time.
• A keyboard listener is provided to allow a shortcut key to open/close the menu.

In the wild

To see an example of this component in use, visit the BLUEPHRASE website. It uses this component for the SYNTAX, SEMANTAX and STYLE buttons. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.

Reference

	Documentation	READ WRITE HUB
	Source code	github
	Component catalog	DOM COMPONENTS
	Package installation	npm
	Publication venue	READ WRITE STACK