mobile menu preset · sheet
The sheet mobile menu, drawn for SAVE THE FROGS!
A Menu button in the bar opens a small sheet directly beneath it, holding the links and the primary button. The page stays where it is.
How it behaves
- A native details element. The summary is the Menu button, drawn as a control: border, fill on open, pointer cursor, 44px tall.
- The sheet is positioned under the bar at the right edge, 260px minimum, on the page ground with a hairline and a shadow.
- Children render as an indented list under their parent, always visible.
- Closes by tapping Menu again, or by keyboard: Tab back to the summary and press Enter.
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
The default. Short menus, and any page that already ships it: /beacon/, /z2w-us/ and site-control's narrow track.
Source. /beacon/, /z2w-us/ and site-control's narrow track (the in-flow details disclosure)
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
- Classic bar
- Mobile menu
- Sheet
- 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 sheet 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 drawer mobile menu, drawn for SAVE THE FROGS!
- The drawer mobile menu (left side, brand ground, no backdrop), drawn for SAVE THE FROGS!
- The full screen mobile menu, drawn for SAVE THE FROGS!