Dental mega menus, five drop-in components
Five different mechanisms, not five skins of one idea. Each one is a self-contained header: one CSS file, one JS file, one HTML fragment, tokens for every colour, radius, font and space. Each ships with its header scroll behaviour built in.
Built against the failure that killed the Keystone panel on 2026-09-16: a floating dark box, narrower than the container, misaligned to the nav, page text bleeding through, four cramped columns and a wrapping button. Every menu here spans the full container, aligns to the nav bar's bottom edge, sits on a solid surface over a page scrim, keeps columns at 280 px or wider, clamps blurbs to two lines, sets icons at 24 px, and keeps the phone and the Book button reachable inside the panel.
01
Classic practice panel
Hover and focus open a light full-width panel
Three service-group columns plus a photo offer card, hours strip beneath.
Practice Clearbrook Family Dental
Type Marcellus / Source Sans 3
Header Headroom, sticky, compacts when stuck
QC checklist, gate B lines
- panel spans the full container width and aligns to the nav bar's bottom edge
- solid opaque surface plus a page scrim, no page text shows through
- every column at least 280 px wide (measured, see the table)
- blurbs at most 2 lines, clamped in CSS
- icons 22 px or larger
- nothing wraps: nav links, buttons and link names are nowrap
- featured card with a photo or offer reads at a glance
- phone and Book reachable inside the panel
- contrast probed against a light hero and a dark hero
- hover, cold click, hover-then-click, mouse-leave, focus, Escape from trigger, Escape from a panel link, Tab cycle
- touch: accordion inside the drawer at 390
- header headroom, sticky, compacts when stuck, phone and Book reachable at every scroll position
02
Split panel, live right side
Hover or focus a group on the left rail, the right side swaps
Group rail plus a live pane: service list, photo, who it is for.
Practice Westmont Dental Studio
Type Cabinet Grotesk / Geist
Header Headroom, sticky, compacts when stuck
QC checklist, gate B lines
- panel spans the full container width and aligns to the nav bar's bottom edge
- solid opaque surface plus a page scrim, no page text shows through
- every column at least 280 px wide (measured, see the table)
- blurbs at most 2 lines, clamped in CSS
- icons 22 px or larger
- nothing wraps: nav links, buttons and link names are nowrap
- featured card with a photo or offer reads at a glance
- phone and Book reachable inside the panel
- contrast probed against a light hero and a dark hero
- hover, cold click, hover-then-click, mouse-leave, focus, Escape from trigger, Escape from a panel link, Tab cycle
- touch: accordion inside the drawer at 390
- header headroom, sticky, compacts when stuck, phone and Book reachable at every scroll position
03
Editorial photo tiles
Hover and focus open a dark full-bleed panel
One photo tile per group, group name set large, services listed beneath.
Practice Verano Dental
Type Playfair Display / Inter
Header Headroom, fixed over the hero, solid once stuck
QC checklist, gate B lines
- panel spans the full container width and aligns to the nav bar's bottom edge
- solid opaque surface plus a page scrim, no page text shows through
- every column at least 280 px wide (measured, see the table)
- blurbs at most 2 lines, clamped in CSS
- icons 22 px or larger
- nothing wraps: nav links, buttons and link names are nowrap
- featured photo tiles read at a glance
- phone and Book reachable inside the panel
- contrast probed against a light hero and a dark hero
- hover, cold click, hover-then-click, mouse-leave, focus, Escape from trigger, Escape from a panel link, Tab cycle
- touch: accordion inside the drawer at 390
- header headroom, fixed over the hero, solid once stuck, phone and Book reachable at every scroll position
04
Compact card grid
Hover and focus open a short panel that fits under a short hero
Two rows of three service cards with illustrative prices, two stacked offer cards on the right.
Practice Pine & Post Dental
Type Funnel Display / Reddit Sans
Header Headroom, sticky, compacts when stuck
QC checklist, gate B lines
- panel spans the full container width and aligns to the nav bar's bottom edge
- solid opaque surface plus a page scrim, no page text shows through
- every column at least 280 px wide (measured, see the table)
- blurbs at most 2 lines, clamped in CSS
- icons 22 px or larger
- nothing wraps: nav links, buttons and link names are nowrap
- featured card with a photo or offer reads at a glance
- phone and Book reachable inside the panel
- contrast probed against a light hero and a dark hero
- hover, cold click, hover-then-click, mouse-leave, focus, Escape from trigger, Escape from a panel link, Tab cycle
- touch: accordion inside the drawer at 390
- header headroom, sticky, compacts when stuck, phone and Book reachable at every scroll position
05
Full-screen overlay
One Menu button opens a focus-trapped overlay, desktop and phone alike
Services grid, patient links, doctor row, hours, phone and Book.
Practice Solstice Dental Co.
Type Sora / Commissioner
Header Pinned compact bar
QC checklist, gate B lines
- panel spans the full container width and aligns to the nav bar's bottom edge
- solid opaque surface plus a page scrim, no page text shows through
- every column at least 280 px wide (measured, see the table)
- blurbs at most 2 lines, clamped in CSS
- icons 22 px or larger
- nothing wraps: nav links, buttons and link names are nowrap
- featured offer block reads at a glance
- phone and Book reachable inside the panel
- contrast probed against a light hero and a dark hero
- hover, cold click, hover-then-click, mouse-leave, focus, Escape from trigger, Escape from a panel link, Tab cycle
- touch: the overlay itself at 390
- header pinned compact bar, phone and Book reachable at every scroll position
How to drop one into a build
- Copy
mega.css and mega.js into the build's build/assets-src/ and append the CSS to the site stylesheet (or keep it as its own file and link it after the site CSS).
- Paste
fragment.html into the generator's header() partial. Replace the practice name, the phone, the services array and the offer. Keep the data-mm-* hooks, they are the whole contract.
- Repoint the image paths from
../img/ at the build's own assets/img/, and keep the WebP plus srcset pattern.
- Override the tokens in the
:root block at the top of mega.css with the build's own palette, fonts, radius and spacing. Nothing below that block is hard-coded, so a restyle is a token diff.
- Pick the header behaviour: leave
--mm-header-mode: headroom, or set --mm-header-mode: pinned (or data-mm-header-mode="pinned" on the header) for a bar that never hides.
- Run the gate B probes on the build: hover, cold click, hover-then-click, mouse-leave, focus, Escape from the trigger, Escape from a panel link, Tab cycle, touch at 390, and take the open-state screenshot at 1440.
Rebuild these demo pages with node build/build-demos.mjs from industries/dental/_shared/mega-menus/. The demos and the fragments are generated, the CSS and JS files are the hand-authored source.