mobile menu preset · drawer
The drawer mobile menu (left side, brand ground, no backdrop), drawn for SAVE THE FROGS!
A panel slides in from one edge and covers 85% of the phone's width, full height, with the page still visible beside it. Links first, then the action blocks at full width, then the social icons pinned at the bottom.
How it behaves
- A native details element whose panel is position: fixed. No script.
- Closing: when open, the summary's ::before covers the whole viewport beneath the panel, so a tap on the backdrop lands on the summary and closes it; the summary's ::after is drawn as a close button at the panel's top corner for the same reason.
- Scroll lock is CSS: html:has(details[open]) sets overflow hidden. Browsers without :has() scroll the page behind the panel.
- Escape does not close it. That needs script, and it is recorded as a gap rather than added.
- Children open as nested details accordions inside the panel.
- Axes: side (right or left), backdrop (none or dim) and groundTone (light or brand). The demo pages show both ends.
To see this menu, make the window narrower than 1010px, or open the page on a phone, then press Menu in the bar. It opens and closes by tap and by keyboard: Tab to Menu, Enter, Tab through the items, Shift+Tab back and Enter again.
When to use it
Menus with groups and children, and any site whose actions deserve the full width of a block.
Source. docs.zernio.com (right, no backdrop, light) and greenmusic.org.au (left, dimmed backdrop, brand ground), both measured at 390 on 2026-09-23
What this page is showing
Every page in the kit carries all three components, so the one under review is seen in a real page rather than in a card. This page's three presets, and the brand they are drawn in:
- Header
- Centered editorial
- Mobile menu
- Drawer (left side, brand ground, no backdrop)
- Footer
- Minimal footer
- Brand
- SAVE THE FROGS! — primary
#72AF43, accent#F5821F, Nunito Sans - Breakpoint
- 1010px: the bar's links show from there up; below it the drawer menu takes over
- Client script
- none — every disclosure is a details element
Measured from
The mobile menu presets were modelled on pages measured off the live DOM at 1440×900 and 390×844 on 2026-09-23. The structure was taken; the sizes were not, because three of the four sources set type below this organisation's floor.
docs.zernio.com/platforms/shopify
Taken: a full-height panel at 85% width from the right edge with the page still visible beside it, links first, actions and socials last. Not copied: 15px items (below the floor) and the script that drives the panel.
| panel | aside fixed to the right edge, 332 of 390px (85%), full height, white, shadow, left border |
|---|---|
| items | 35 links, 15px / 400, 39px rows, a leading icon each, a chevron on items with children |
| groups | plain-text group headings; the current page is a tinted pill |
| panelFooter | pinned to the bottom: primary button, icon links, theme toggle |
| backdrop | none |
greenmusic.org.au
Taken: the left side, the dimmed backdrop and the brand ground as the other end of each drawer axis; the CTA blocks stacked at full width; the socials centred beneath. Not copied: the 0.4s slide transition's script.
| panel | 350 of 390px (90%), full height, brand-green ground, slides in over 0.4s, dimmed full-screen backdrop |
|---|---|
| items | 20px / 700 / uppercase |
| ctas | three full-width blocks under the links |
| socials | centred beneath the blocks |
blackdiamondequipment.com
Taken: a full-width panel under the bar with big bold type and nothing else on the screen. Not copied: the drill-down that replaces the list with a sub-level (script), and the 11px / 800 uppercase desktop nav.
| panel | full width from under the 50px bar to the bottom, 390×756 at y=90, black |
|---|---|
| items | 8 top-level items at about 24px on a 44px row pitch, read from the screenshot (the DOM probe hit the hidden desktop mega menu) |
| drillDown | a chevron on every item with children opens a sub-level |
| pinned | four social icons and Log in at the bottom |
The rest of the kit
The same preset in the other brand
Other mobile menu demos for SAVE THE FROGS!
- The sheet mobile menu, drawn for SAVE THE FROGS!
- The drawer mobile menu, drawn for SAVE THE FROGS!
- The full screen mobile menu, drawn for SAVE THE FROGS!