SECTION

Dock

A bar of destinations pinned to the bottom edge, in reach of a thumb. Think of it as the other answer to a narrow screen, not as a companion to the hamburger.

Four destinations, one of them inert

A phone-width stage, because that is the only width where a dock exists at all — go wider and nav-switch decides there is no room for one and draws nothing. It is pinned inside this box rather than to the window so it can demonstrate itself in place; on a real page it sits on the bottom edge and stays there.

HTML

<div class="nav-switch">
  <div class="nav-switch-tight">
    <nav class="dock" aria-label="Primary">
      <a class="dock-item" href="#home" aria-current="page">
        <svg class="icon icon-duo" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.6">
          <path d="M4 11 L12 4 L20 11"></path>
          <path d="M6 11 L6 20 L18 20 L18 11"></path>
        </svg>
        <span class="dock-label">HOME</span>
      </a>

      <a class="dock-item" href="#work">
        <svg class="icon icon-duo" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.6">
          <rect x="4" y="7" width="16" height="13"></rect>
          <path d="M9 7 L9 4 L15 4 L15 7"></path>
        </svg>
        <span class="dock-label">WORK</span>
      </a>

      <a class="dock-item" href="#writing">
        <svg class="icon icon-duo" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.6">
          <path d="M6 4 L15 4 L18 7 L18 20 L6 20 Z"></path>
          <path d="M9 12 L15 12 M9 16 L15 16"></path>
        </svg>
        <span class="dock-label">WRITING</span>
      </a>

      <span class="dock-item" aria-disabled="true" title="Nothing recorded yet.">
        <svg class="icon icon-duo" viewBox="0 0 24 24" aria-hidden="true" stroke-width="1.6">
          <circle cx="12" cy="12" r="8"></circle>
          <path d="M12 8 L12 12 L15 14"></path>
        </svg>
        <span class="dock-label">TALKS</span>
      </span>
    </nav>
  </div>
</div>

Reference

Read from sections/dock.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.dock.dock-item.dock-label

SETTINGSSet the first on one element; a theme sets the second for all of them.--dock-shadow — falls back to --ds-shadow-floating-up--dock-mark — falls back to --ds-shadow-flat

READS--ds-accent--ds-dock-h--ds-focus-ring-inset--ds-focus-width--ds-font-display--ds-gap-tight--ds-ground--ds-ground-veil--ds-hairline--ds-ink--ds-ink-disabled--ds-ink-soft--ds-motion-fast--ds-pad-chip--ds-rule--ds-text-meta--ds-track-meta--ds-veil-blur

Notes

PICK ONE, NOT BOTH

A dock shows three to five destinations permanently, where a thumb already is. A hamburger hides any number behind one press. They answer the same question differently, and a page carrying both has two navigations disagreeing about which is the primary one — the reader has to learn each of them, and neither is where they look first.

IT DECLARES NO WIDTH OF ITS OWN

Whether there is room for a dock is .nav-switch's question, and the library answers it in exactly one place. Wrap it in .nav-switch-tight — on a plain element, never on the dock itself, because both of them set display and putting them on one element leaves the winner to import order rather than to anything you wrote.

THE NOTCH IS PADDING, NOT MARGIN

env(safe-area-inset-bottom) keeps the content above a home indicator while the bar itself still reaches the physical edge. As a margin it would leave a strip of page showing underneath, scrolling on its own, which reads as a rendering fault. The consumer owes <meta name="viewport" content="viewport-fit=cover"> — without it the inset is always zero and this does nothing at all.

A LABEL UNDER EVERY ICON, ALWAYS

This is the one place in the system where a picture carries a destination, and a destination nobody can name is a destination nobody presses. The label is also what gives the link its accessible name — dropping it does not just read as terser, it silences the control. The cells share the row equally, so a thumb aiming at the third of five does not have to know how long the words are.