COMPONENT
Nav switch
Which of two navigations there is room to draw. It holds the only threshold in the library, and that threshold is a container width rather than a window width.
A row of links, or a button holding the same links
Narrow the window. Below the threshold the row is replaced by a hamburger whose panel holds every destination the row had — nothing is dropped, and nothing scrolls.
<nav class="nav-switch" aria-label="Sections">
<div class="nav-switch-wide">
<ul class="menu menu-inline">
<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>
<li><a class="menu-item" href="#about">About</a></li>
</ul>
</div>
<div class="nav-switch-tight">
<div class="dropdown">
<button
class="dropdown-button nav-toggle nav-toggle-bars"
popovertarget="ds-switch-menu"
aria-label="Sections"
></button>
<div class="dropdown-panel" id="ds-switch-menu" 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>
<li><a class="menu-item" href="#about">About</a></li>
</ul>
</div>
</div>
</div>
</nav>Reference
Read from components/nav-switch.css when this page was built, so it cannot fall behind the stylesheet.
.nav-switch.nav-switch-wide.nav-switch-tightNotes
Everything else in this system is fluid — clamp(), auto-fit on a min(100%, …) floor, flex-wrap with a basis — and it carries no breakpoints. A hamburger is not a size, it is a mode: there is no halfway between five links in a row and one button, so there is nothing for clamp() to interpolate. The system still has no breakpoints. It has one mode switch, and it lives in one file.
A header dropped into a 400px sidebar on a 1600px monitor has no room for a row of links, and a media query would cheerfully draw one anyway. This asks the box. .nav-switch establishes its own query container rather than trusting the caller to have made one — and it takes its width from the row it sits in rather than from its own contents, because a container that sizes to its children cannot answer whether there is room for its children.
.nav-switch-wide and .nav-switch-tight belong on plain elements that nothing else styles. Put one directly on a .menu and it works — until some component sets display on that same element, at which point which one wins is decided by import order rather than by anything you wrote.
dock and anything else that collapses reuse these two classes rather than declaring a width of their own — two spellings of one decision is the failure this system is arranged to prevent. The cost is that one threshold cannot know how many destinations a site has: above it, a navigation too long for its row still takes a second line rather than losing an item. It is written in rem, so a reader who raises their default font size collapses it sooner.