COMPONENT
Nav toggle
The square button that opens a navigation, and the two glyphs it can wear. Both are drawn in CSS — no sprite, no asset, nothing for you to install.
Two glyphs, both opening a menu
Open either with Enter or Space, close it with Escape. Watch the glyph cross-fade into a close mark while its panel is open.
<div class="dropdown">
<button
class="dropdown-button nav-toggle nav-toggle-bars"
popovertarget="ds-menu-bars"
aria-label="Menu"
></button>
<div class="dropdown-panel" id="ds-menu-bars" popover>
<ul class="menu">
<li><a class="menu-item" href="#work" aria-current="page">Work</a></li>
<li><a class="menu-item" href="#craft">Craft</a></li>
<li><a class="menu-item" href="#process">Process</a></li>
</ul>
</div>
</div>
<div class="dropdown">
<button
class="dropdown-button nav-toggle nav-toggle-grid"
popovertarget="ds-menu-grid"
aria-label="Sections"
></button>
<div class="dropdown-panel" id="ds-menu-grid" popover>
<ul class="menu">
<li><a class="menu-item" href="#work">Work</a></li>
<li><a class="menu-item" href="#craft">Craft</a></li>
<li><a class="menu-item" href="#process">Process</a></li>
</ul>
</div>
</div>Reference
Read from components/nav-toggle.css when this page was built, so it cannot fall behind the stylesheet.
.nav-toggle.nav-toggle-bars.nav-toggle-grid--ds-motion-fast--ds-pad-toggle--ds-toggle-bar--ds-toggle-glyphNotes
The button has no text at all, and the glyph is a background rather than an image — so there is not even an alt for assistive technology to fall back on. Without aria-label the control announces itself as "button" and nothing more. A check refused a control with no accessible name until 21 August 2026, when it was removed along with the rest of the interaction pass — so this is a sentence again rather than a failure, and the aria-label is now yours to remember.
The border, the fill, the hover and the focus ring are all .dropdown-button's and are not written a second time — this component owns the square shape and the two glyphs, and nothing else. A control that merely looks like a dropdown button is how the two drift apart, and the drift is only ever noticed on the state nobody screenshotted.
Folding three separate bars into a close mark needs three elements and a different animation per glyph. Two stacked pseudo-elements give one mechanism instead: the close mark is drawn once for every glyph there will ever be, and a variant only has to draw its resting form. It reads --disclosure-open, the same signal .caret reads — one fact, stated once by whichever disclosure owns it.
--ds-hairline is the weight every border in the system is drawn at, and the rule that there is only one of them is about rules. This is a glyph stroke: a 1px hamburger at 18px reads as three scratches rather than a control, so it has its own token and --ds-toggle-bar says so where a theme can see it.
.nav-toggle-bars is the hamburger everybody already knows, and there is real value in not being clever about the one control a first-time visitor has to recognise instantly. .nav-toggle-grid is four squares: it still reads as "more", and it does not read as anybody else's app. Pick one per site and keep it.