
Open Source DOM Component
Nested Menu
Multi-column expandable dropdown

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 |