Premium DOM Component

Dockable Panels

Expand, collapse, dock and float

by Read Write Tools
The rwt-dockable-panels DOM component is an accordion-style component with panels that expand/collapse and dock/float.


Some apps have lots of interactive manipulations for working with a canvas or object. Putting the tools and options for these manipulation commands within menus is a weak design pattern. The use of floatable, dockable, and collapsable panels is a better alternative because it lets the user initiate commands with shorter mouse transit times and fewer clicks. It also provides the user with a personalized mental map of where the commands can be initiated, something that a hierarchical menu doesn't do well.

The component has these features:

  • The component comprises a collection of panels that contain logically related information.
  • Each panel has a titlebar for self-identification and a panel area comprising DOM elements.
  • The titlebar has an expand/collapse button which allows the panel's elements to be shown or hidden.
  • The titlebar has a float/dock button which allows the panel to be detached/attached from the main panel.
  • Floating panels can be moved with the mouse by dragging the titlebar.
  • The initial position of the menu is relative to any one of the four viewport corners.

In the wild

To see an example of this component in use, visit the website. It uses this component for its Tangent, Scale, Rotate, Locate, and Identify panels. To understand what's going on under the hood, use the browser's inspector to view the HTML source code and network activity, and follow along as you read this documentation.


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


Premium DOM Component

🔗 🔎