Open Source DOM Component

Corner Pocket

Website popup menu

by Read Write Tools
The rwt-corner-pocket DOM component is a popup menu using both text and icons. It is suitable for targeting a small list of external websites.


A website's main menu guides the visitor to internal documents, but occasionally there may be a desire to guide visitors to a short list of external websites that are somehow related.

The rwt-corner-pocket DOM component is normally kept hidden until needed, when it slides into the viewport from any one of its four corners. Visibility of the menu is under control of a separate button that triggers the component's toggleMenu method or its event interface.

The component has these features:

  • The position of the menu is relative to any one of the four viewport corners.
  • The menu has a title bar running vertically along its left edge.
  • Each menu item has both text and icon.
  • The menu item corresponding to the current page is highlighted when the page is loaded.
  • The menu has an event interface for showing/hiding itself.
  • The menu emits a custom event to close sibling menus and dialog boxes.
  • Menu items may be kept separate from the DOM component, allowing the webmaster to change its contents in a single centralized place. Alternatively, menu items may be slotted directly between the component's opening and closing tags.
  • A keyboard listener is provided to allow a shortcut key to expand/collapse the menu.

In the wild

To see an example of this component in use, visit the BLUEPHRASE website and press F9 "Find It Here". To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity.


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 Hub icon

Distraction-free writing



Rediscover HTML


Read Write Serve icon

Served with pure HTTP/2


Open Source DOM Component

🔗 🔎