Open Source DOM Component

Nested Menu

Multi-column expandable dropdown

by Read Write Tools
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

DOM components logo Documentation READ WRITE HUB
git logo Source code github
DOM components logo Component catalog DOM COMPONENTS
npm logo Package installation npm
Read Write Stack logo Publication venue READ WRITE STACK
Read Write Tools icon

Smart tech

READ WRITE TOOLS

Read Write Hub icon

Distraction-free writing

RWDOC

BLUEPHRASE icon

Rediscover HTML

BLUE PHRASE

Read Write Serve icon

Served with pure HTTP/2

RWSERVE

Open Source DOM Component

🔗 🔎