COMPONENT

Megamenu

A dropdown panel wide enough to hold a map of your site. It is two declarations, because everything it is made of already exists.

Three columns of destinations

Open it with Enter, close it with Escape, and Tab walks all nine links. Narrow the window and the columns reflow to two and then one, with no breakpoint anywhere.

HTML

<div class="dropdown">
  <button class="dropdown-button" popovertarget="ds-everything">
    <span>Everything</span>
    <span class="caret" aria-hidden="true">&#9662;</span>
  </button>

  <div class="dropdown-panel megamenu" id="ds-everything" popover>
    <div class="hairline-grid">
      <div class="hairline-cell">
        <p class="menu-title">WORK</p>
        <ul class="menu">
          <li><a class="menu-item" href="#case-studies">Case studies</a></li>
          <li><a class="menu-item" href="#clients">Clients</a></li>
          <li><a class="menu-item" href="#process">How I work</a></li>
        </ul>
      </div>

      <div class="hairline-cell">
        <p class="menu-title">WRITING</p>
        <ul class="menu">
          <li><a class="menu-item" href="#journal">Journal</a></li>
          <li><a class="menu-item" href="#notes">Filed notes</a></li>
          <li><span class="menu-item" aria-disabled="true" title="Nothing recorded yet.">Talks</span></li>
        </ul>
      </div>

      <div class="hairline-cell">
        <p class="menu-title">ABOUT</p>
        <ul class="menu">
          <li><a class="menu-item" href="#history">History</a></li>
          <li><a class="menu-item" href="#availability">Availability</a></li>
          <li><a class="menu-item" href="#contact" aria-current="page">Get in touch</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Reference

Read from components/megamenu.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.megamenu

READS--ds-megamenu-w--ds-pad-card

Notes

IT IS TWO DECLARATIONS, AND THAT IS THE POINT

The disclosure is .dropdown, the columns are .hairline-grid, the headings are .menu-title and the links are .menu. All this component adds is permission to be wide. Anything here that reimplemented one of those would be a fifth spelling of a layout the system already draws — and the fifth spelling is always the one that does not get the fix.

NO BREAKPOINT IN IT

.hairline-grid reflows on auto-fit over a min(100%, --cell) floor, so three columns become two and then one as the panel narrows and there is nothing to declare. Below .nav-switch's threshold a megamenu should not be a megamenu at all: put the ordinary stacked .menu in the tight slot and this in the wide one.

WHY THE WIDTH IS A MIN()

The panel is anchored, so its containing block is the space between the button and the edge it opens toward. A stated width larger than that space runs the panel off the screen — and because a popover sits in the top layer, nothing clips it and no scrollbar appears to tell you. The 100% is what makes it give way.

IT LOADS NOTHING AND KNOWS NOTHING

A megamenu is where sites reach for a fetch and a spinner. This one is markup that was already on the page — which is why it opens instantly, works with the network off, and is in the document for a crawler to read.