Wide Nav

A three-part navigation: a top bar, drop panels with columns under it, and a mobile drawer. The panels open on click rather than hover, so they work on touch and do not fire every time a cursor drifts past. Arrow keys move through the links, Escape closes the panel and puts focus back on the trigger that opened it.

Everything is driven by one nav.js file. You list sections, columns and links in an array and the desktop panels, the drawer and the aria wiring all read from it, so adding a page never means editing markup in two places. There is a featured slot in each panel for an image and a line of text, a sticky and a static header variant, and reduced-motion handling on the open and close.

Wrong choice for a site with eight pages. A plain nav is better there and this will look overbuilt. It is also not search: if the real problem is people cannot find one product in a catalogue of four hundred, buy search instead.