Site Navigation

Links
Tech
  • JavaScript
  • Custom Element

The purpose of this tool is to provide an easy-to-use interface and standardized-yet-flexible layout for navigation menus—the things where you click on them and they open up.

The core idea used in the custom element is that of two elements:

  • toggle
  • drawer

A toggle is a button, and clicking it swaps the state of a drawer, which can be open or closed. The drawer is always the single source of truth for the state of the toggle/drawer system, and can also be directly targeted through Javascript:

// Let's assume you have a Drawer with the ID `location-list`, 
// which is currently closed.

document.getElementByID(`location-list`).toggleDrawer();
// The Drawer is now open.

document.getElementByID(`location-list`).openDrawer();
// The state of the Drawer has not changed.

document.getElementByID(`location-list`).closeDrawer();
// The Drawer is now closed.

The element itself applies almost no styling, aside from making sure that [hidden] actually hides things. Beyond that it just changes the state via aria attributes and the presense or absence of the hidden attribute on the drawer, allowing you to style and animate it however you like.

I’ve used this tool on several sites.