Navigation.

Tab bars, segmented controls and the things people move around with.

13 components

Sort

index.html

<nav class="abacus" aria-label="Pagination">
  <button class="abacus-end abacus-prev" type="button"></button>
  <div class="abacus-rail"></div>
  <button class="abacus-end abacus-next" type="button"></button>
</nav>

abacus.css

.abacus-end {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--abacus-post);
  height: calc(var(--abacus-bead-h) + 10px);
  margin: 0;
  padding: 0;
  border: 0;

abacus.js

export function init(root, {
  pages = 9,
  page = 1,
  window: win = 7,        // beads shown at once when there are more than 12 pages (odd numbers work best)
  onChange,
  onPreview,              // called while a bead is pulled, with the page it would land on
  drag = true,            // pull beads along the rod with a finger or the mouse
  duration = 440,         // ms a bead takes to cross the gap and settle
  stagger = 40,           // ms between beads in a chain
  labels = {},
} = {}) {

Abacus

Pagination where numbered beads slide along a metal rod and clack into place

11.3 KB0 depsNavigation

index.html

<div class="aperture">
  <header class="aperture-bar">
    <a class="aperture-brand" href="#">Nocturne</a>
    <button class="aperture-toggle" type="button" aria-label="Menu">
      <svg class="aperture-iris" viewBox="0 0 64 64" aria-hidden="true" focusable="false">
        <defs>
          <linearGradient id="aperture-rim-g" gradientUnits="userSpaceOnUse" x1="8" y1="6" x2="56" y2="60">
            <stop offset="0" class="aperture-rim-a"/><stop offset=".42" class="aperture-rim-b"/><stop offset=".6" class="aperture-rim-c"/><stop offset="1" class="aperture-rim-d"/>
          </linearGradient>
          <linearGradient id="aperture-steel-g" gradientUnits="userSpaceOnUse" x1="6" y1="4" x2="58" y2="62">
            <stop offset="0" class="aperture-steel-a"/><stop offset=".34" class="aperture-steel-b"/><stop offset=".52" class="aperture-steel-c"/><stop offset="1" class="aperture-steel-d"/>

aperture.css

.aperture-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--aperture-plate);
  box-shadow: inset 0 1px 0 var(--aperture-plate-hi), 0 1px 0 var(--aperture-plate-edge), var(--aperture-plate-shadow);
  transition: opacity 240ms var(--aperture-ease-out);
}
.aperture.is-open .aperture-bar::before { opacity: 0; }
.aperture-brand {

aperture.js

export function init(root, { onOpen, onClose, onSelect, onPreview, push, drag = true } = {}) {
  const toggle = root.querySelector('.aperture-toggle');
  const iris = toggle.querySelector('.aperture-iris');
  const menu = root.querySelector('.aperture-menu');
  const list = menu.querySelector('.aperture-list');
  const readout = root.querySelector('.aperture-readout-n');
  const glass = iris.querySelector('.aperture-glass');
  const flare = iris.querySelector('.aperture-flare');
  const links = [...menu.querySelectorAll('.aperture-link')];
  const blades = [...iris.querySelectorAll('.aperture-blade')];

Aperture

A menu button whose iris blades open into a full-screen menu and snap shut like a shutter

11.9 KB0 depsNavigation

index.html

<nav class="dimple" aria-label="Main">
  <button class="dimple-tab" type="button" aria-selected="true" data-value="home" data-tint="#ffb238">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/><path class="dimple-line" d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-5.5H9v5.5H5.5A1.5 1.5 0 0 1 4 19z"/></svg>
    <span class="dimple-label">Home</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="explore" data-tint="#36d695">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17z"/><path class="dimple-line" d="M12 3.5a8.5 8.5 0 1 1 0 17 8.5 8.5 0 0 1 0-17zM15.5 8.5l-2 5-5 2 2-5z"/></svg>
    <span class="dimple-label">Explore</span>
  </button>
  <button class="dimple-tab" type="button" aria-selected="false" data-value="inbox" data-tint="#ff6b57">
    <svg class="dimple-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="dimple-fill" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/><path class="dimple-line" d="M3.5 13 6 5.5h12l2.5 7.5v5A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18zM3.5 13H8l1.5 2.5h5L16 13h4.5"/></svg>

dimple.css

.dimple {
  --dimple-h: 64px;                 /* the bar itself */
  --dimple-head: 30px;              /* room above the bar for the drop to hop */
  --dimple-drop: 46px;              /* drop diameter */
  --dimple-radius: 26px;            /* bar corners */
  --dimple-width: 420px;
  --dimple-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

  --dimple-bar-top: #ffffff;
  --dimple-bar-bottom: #eef0f5;
  --dimple-rim: rgb(255 255 255 / .95);

dimple.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.dimple-tab')];
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const tintOf = t => t.dataset.tint || '';

  let index = Math.max(0, tabs.findIndex(t => t.getAttribute('aria-selected') === 'true'));
  root.setAttribute('role', 'tablist');
  tabs.forEach(t => {
    t.setAttribute('role', 'tab');
    t.setAttribute('aria-selected', 'false');
    t.tabIndex = -1;

Dimple

A bottom tab bar where a coloured drop hops between dips in the bar and lands with a ripple

8.4 KB0 depsNavigation

index.html

<nav class="fresnel" aria-label="Main">
  <svg class="fresnel-lamp" viewBox="0 0 120 140" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="fresnel-g-barrel" x1="0" y1="0" x2="1" y2="0">
        <stop class="fresnel-s-edge" offset="0"/>
        <stop class="fresnel-s-rim" offset=".07"/>
        <stop class="fresnel-s-hi" offset=".3"/>
        <stop class="fresnel-s-mid" offset=".58"/>
        <stop class="fresnel-s-shade" offset=".86"/>
        <stop class="fresnel-s-dark" offset="1"/>
      </linearGradient>

fresnel.css

.fresnel-lamp {
  grid-row: 1;
  position: relative;
  z-index: 3;
  height: var(--fresnel-lamp-h);
  width: auto;
  overflow: visible;
  translate: 0 0;
  transition: translate 100ms var(--fresnel-ease);
  pointer-events: none;
}

fresnel.js

export function init(root, {
  onChange,            // (index, href) => void, when the chosen link changes
  onPreview,           // (index, href) => void, while dragging: the link the beam is over
  followLinks = true,  // a plain click follows the link once the lamp strikes on it
  drag = true,         // press and drag (or flick) along the bar to aim the lamp
  travel = 560,        // ms, sets the spring's stiffness: with the default settle the beam is within 10% of
                       // the link after ~0.35 s, strikes at ~0.33–0.4 s and is fully still after ~0.9–1.2 s
  settle = .12,        // 0–.4, how much the lamp overshoots and settles on arrival
} = {}) {
  const $ = s => root.querySelector(s);
  const head = $('.fresnel-head');

Fresnel

A navigation bar lit by a stage spotlight that swings to the link you choose

10 KB0 depsNavigation

index.html

<nav class="lantern" aria-label="Main">
  <ul class="lantern-list">
    <li><a class="lantern-link" href="#overview" aria-current="page">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="7" height="7" rx="2"/><rect x="13.5" y="3.5" width="7" height="7" rx="2"/><rect x="3.5" y="13.5" width="7" height="7" rx="2"/><rect x="13.5" y="13.5" width="7" height="7" rx="2"/></svg>
      <span class="lantern-label">Overview</span>
    </a></li>
    <li><a class="lantern-link" href="#orders">
      <svg class="lantern-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 8.2 12 4l8.5 4.2v7.6L12 20l-8.5-4.2Z"/><path d="M3.5 8.2 12 12.4l8.5-4.2M12 12.4V20"/></svg>
      <span class="lantern-label">Orders</span>
    </a></li>
    <li><a class="lantern-link" href="#clients">

lantern.css

.lantern-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--lantern-row);
  padding: 0 14px 0 calc(var(--lantern-icon-x) - var(--lantern-inset));
  border-radius: 12px;
  text-decoration: none;
  color: var(--lantern-ink);
  -webkit-tap-highlight-color: transparent;

lantern.js

export function init(root, { onChange, onPreview, reach, drag = true } = {}) {
  const id = `lantern-${++instances}`;
  const links = [...root.querySelectorAll('.lantern-link')];
  if (!links.length) throw new Error('Lantern: no .lantern-link found');
  if (root.tagName !== 'NAV' && !root.getAttribute('role')) root.setAttribute('role', 'navigation');

  const hooks = links.map(link => {
    const hook = drawHook(id);
    link.prepend(hook);
    const dot = document.createElement('span');
    dot.className = 'lantern-dot';

Lantern

A sidebar where a hanging lantern swings to the item you choose and lights the labels around it

10.5 KB0 depsNavigation

index.html

<nav class="loupe" aria-label="Sections">
  <div class="loupe-bar">
    <div class="loupe-tabs" role="tablist">
      <button class="loupe-tab" type="button" role="tab" aria-selected="true" data-value="today">
        <svg class="loupe-icon" viewBox="0 0 24 24" aria-hidden="true"><rect class="loupe-shape" x="3" y="5" width="18" height="16" rx="4"/><path class="loupe-line" d="M3 10h18"/><path d="M8 3.5v3M16 3.5v3"/><circle class="loupe-dot" cx="12" cy="15.5" r="1.4"/></svg>
        <span class="loupe-label">Today</span>
      </button>
      <button class="loupe-tab" type="button" role="tab" aria-selected="false" data-value="inbox">
        <svg class="loupe-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="loupe-shape" d="M6.2 4.5h11.6a2 2 0 0 1 1.9 1.4L22 13v4.5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V13l2.3-7.1a2 2 0 0 1 1.9-1.4z"/><path class="loupe-line" d="M2 13h5l1.5 2.5h7L17 13h5"/></svg>
        <span class="loupe-label">Inbox</span>
      </button>

loupe.css

.loupe-tab {
  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  height: var(--loupe-h);
  min-width: var(--loupe-tab-w);
  border-radius: 999px;
  display: grid;

loupe.js

export function init(root, { onChange, onPreview, magnify, drag = true } = {}) {
  const tabs = root.querySelector('.loupe-tabs');
  const items = [...tabs.querySelectorAll('.loupe-tab')];
  const icons = items.map(t => t.querySelector('.loupe-icon'));
  const scale = magnify ?? (parseFloat(getComputedStyle(root).getPropertyValue('--loupe-magnify')) || 1.6);
  const valueOf = i => items[i].dataset.value ?? items[i].textContent.trim();

  // build the lens: caustic + lift shadow (under), dome (glass) › view (magnified copy) + sweep (finale glint)
  const el = (cls) => { const s = document.createElement('span'); s.className = cls; return s; };
  const lens = el('loupe-lens');
  lens.setAttribute('aria-hidden', 'true');

Loupe

A glass tab bar where a lens slides over the active tab and magnifies what's under it

7.8 KB0 depsNavigation

index.html

<div class="marble" aria-label="Main">
  <button class="marble-tab" type="button" aria-selected="true" data-value="home">
    <svg class="marble-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="marble-fill" d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/><path class="marble-line" d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-4.5v-6h-5v6H5a1 1 0 0 1-1-1z"/></svg>
    <span class="marble-label">Home</span>
  </button>
  <button class="marble-tab" type="button" aria-selected="false" data-value="search">
    <svg class="marble-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="marble-fill" d="M10.5 4.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12z"/><path class="marble-line" d="M10.5 4.5a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM15 15l5 5"/></svg>
    <span class="marble-label">Search</span>
  </button>
  <button class="marble-tab" type="button" aria-selected="false" data-value="library">
    <svg class="marble-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="marble-fill" d="M4 4h4v16H4zM10 4h4v16h-4zM15.2 5.6l3.9-1 4 15.4-3.9 1z"/><path class="marble-line" d="M4 4h4v16H4zM10 4h4v16h-4zM15.2 5.6l3.9-1 4 15.4-3.9 1z"/></svg>

marble.css

.marble-tab {
  appearance: none;
  position: relative;
  z-index: 3;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin: 0;

marble.js

export function init(root, { onChange, onPreview, drag = true } = {}) {
  const tabs = [...root.querySelectorAll('.marble-tab')];
  const icons = tabs.map(t => t.querySelector('.marble-icon'));
  const reduced = () => !!root.closest('[data-motion="reduced"]') || matchMedia('(prefers-reduced-motion: reduce)').matches;

  // the parts the buyer never writes: groove with dimples, the ball, the ring
  const groove = el('marble-groove', root);
  groove.setAttribute('aria-hidden', 'true');
  const dimples = tabs.map(() => { const d = el('marble-dimple', groove); d.glow = el('marble-dimple-glow', d); return d; });
  const ball = el('marble-ball', root);
  ball.setAttribute('aria-hidden', 'true');

Marble

A bottom tab bar where a chrome ball rolls along a groove to the tab you tap

8.7 KB0 depsNavigation

index.html

<!-- no pill in the markup:
     the script adds it
     behind the options -->
<div class="pinch"
  aria-label="View">
  <button
    class="pinch-option" …
    data-value="day"
    aria-checked="true">
<!-- radio roles, roving
     tabindex: from JS -->

pinch.css

/* isolate: z-index -1 puts
   the pill under the labels
   but above the glass */
.pinch { …
  isolation: isolate; …
.pinch-pill { …
  left: 0; …
  z-index: -1;
  /* set by JS per frame */
  will-change: transform,
    width;

pinch.js

// the edge in front gets
// the stiff spring, so the
// pill stretches, then the
// back edge catches up
const lead = movingRight
  ? R : L, trail = …
for (const [s, p] of …) {
  const a = -p.k * (s.x -
    s.target) - p.c * s.v;
  s.v += a * dt;
  s.x += s.v * dt;

Pinch

A glass segmented control whose pill stretches like a drop of water

3.2 KB0 depsNavigation

index.html

<div class="plumb">
  <nav class="plumb-toc" aria-label="On this page">
    <div class="plumb-toc-scroll">
      <p class="plumb-toc-title">On this page</p>
      <ol class="plumb-toc-list">
        <li><a class="plumb-toc-link" href="#measure">The measure</a></li>
        <li><a class="plumb-toc-link" href="#leading">Leading</a></li>
        <li><a class="plumb-toc-link" href="#kerning">Kerning and tracking</a></li>
        <li><a class="plumb-toc-link" href="#figures">Figures</a></li>
        <li><a class="plumb-toc-link" href="#rag">Hyphenation and the rag</a></li>
        <li><a class="plumb-toc-link" href="#margins">Margins</a></li>

plumb.css

.plumb-toc-title {
  margin: 0 0 18px;
  padding-left: calc(var(--plumb-gutter) + var(--plumb-indent));
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plumb-muted);
}
.plumb-toc-list {

plumb.js

export function init(root, { onChange, onPreview, offset = 96, drag: draggable = true } = {}) {
  const toc = root.querySelector('.plumb-toc');
  const scroller = toc.querySelector('.plumb-toc-scroll') || toc;
  const title = toc.querySelector('.plumb-toc-title');
  const links = [...toc.querySelectorAll('.plumb-toc-link')];
  const sections = links.map(a => {
    const id = decodeURIComponent((a.getAttribute('href') || '').replace(/^#/, ''));
    return (id && (root.querySelector('#' + CSS.escape(id)) || document.getElementById(id))) || null;
  });
  const mq = matchMedia('(prefers-reduced-motion: reduce)');
  const reduced = () => mq.matches || !!root.closest('[data-motion="reduced"]');

Plumb

A table of contents where a plumb bob on a thread hangs beside the section you're reading and swings as you scroll

11.9 KB0 depsNavigation

index.html

<nav class="siphon" aria-label="Main">
  <div class="siphon-bar">
    <div class="siphon-links">
      <a class="siphon-link" href="#home" data-value="home" aria-current="page">
        <svg class="siphon-icon" viewBox="0 0 24 24" aria-hidden="true"><path class="siphon-shape" d="M4 10.4 12 4l8 6.4v8.6a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 19z"/><path class="siphon-cut" d="M10 20.4v-4.9h4v4.9"/></svg>
        <span class="siphon-label">Home</span>
      </a>
      <a class="siphon-link" href="#work" data-value="work">
        <svg class="siphon-icon" viewBox="0 0 24 24" aria-hidden="true"><rect class="siphon-shape" x="4" y="4" width="7" height="7" rx="2"/><rect class="siphon-shape" x="13" y="4" width="7" height="7" rx="2"/><rect class="siphon-shape" x="4" y="13" width="7" height="7" rx="2"/><rect class="siphon-shape" x="13" y="13" width="7" height="7" rx="3.5"/></svg>
        <span class="siphon-label">Work</span>
      </a>

siphon.css

.siphon-dye {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--siphon-h);
  padding: 0 17px 0 15px;
  border-radius: 999px;
  color: var(--siphon-muted);
  font-size: .875rem;

siphon.js

export function init(root, { onChange, onTheme, theme = true, themeTarget = document.documentElement } = {}) {
  const row = root.querySelector('.siphon-links');
  const links = [...row.querySelectorAll('.siphon-link')];
  const themeBtn = theme ? root.querySelector('.siphon-theme') : null;
  const valueOf = i => links[i].dataset.value ?? links[i].textContent.trim();
  const id = `siphon-${++uid}`;

  // ---- build: pour layer = liquid svg + an ink copy of the links clipped to the liquid ----
  const pour = document.createElement('span');
  pour.className = 'siphon-pour';
  pour.setAttribute('aria-hidden', 'true');

Siphon

A glass navigation bar whose highlight pours from link to link like honey

9.2 KB0 depsNavigation

index.html

<nav class="sumi" aria-label="Main">
  <ul class="sumi-list">
    <li><a class="sumi-link" href="#home" aria-current="page">Home</a></li>
    <li><a class="sumi-link" href="#works">Works</a></li>
    <li><a class="sumi-link" href="#studio">Studio</a></li>
    <li><a class="sumi-link" href="#journal">Journal</a></li>
    <li><a class="sumi-link" href="#contact">Contact</a></li>
  </ul>
</nav>

sumi.css

.sumi-link {
  position: relative;
  display: inline-grid;
  justify-items: center;
  padding: var(--sumi-pad-y) var(--sumi-pad-x);
  border-radius: 6px;
  color: var(--sumi-muted);
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;

sumi.js

export function init(root, {
  onChange,
  seal = true,
  onPreview,
  duration = 520,        // ms the stroke takes to paint
  paintOnLoad = 'auto',  // 'auto': paint only when the visitor arrived through this nav; true: always; false: never
  drag = true,           // press and drag along the nav to paint your way to a link
} = {}) {
  const links = [...root.querySelectorAll('.sumi-link')];
  const reduced = () => root.closest('[data-motion="reduced"]') !== null || matchMedia('(prefers-reduced-motion: reduce)').matches;
  const items = [];

Sumi

A site navigation whose active link is underlined by a brush stroke painted in ink, then stamped with a seal

12.3 KB0 depsNavigation

index.html

<div class="sweep">
  <button class="sweep-fab" type="button" aria-label="Quick actions">
    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
  </button>
  <ul class="sweep-menu" aria-label="Quick actions">
    <li class="sweep-seat" role="none">
      <button class="sweep-item" type="button" data-value="note" aria-label="New note">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5M12 11v6M9 14h6"/></svg>
      </button>
    </li>
    <li class="sweep-seat" role="none">

sweep.css

.sweep-fab {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: var(--sweep-fab);
  height: var(--sweep-fab);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(120% 110% at 50% -5%, var(--sweep-fab-top), var(--sweep-fab-bottom) 72%);

sweep.js

export function init(root, {
  onOpen,              // () => void, once the menu starts opening
  onClose,             // () => void, once the menu starts closing
  onSelect,            // (index, value) => void, when an item is chosen
  onPreview,           // (index) => void, while dragging: the item the arm points at, -1 for none
  startAngle = 30,     // degrees clockwise from the top, where the first item sits
  openTime = 600,      // ms for the full opening sweep
  closeTime = 320,     // ms for the full closing sweep
  closeOnSelect = true,
  drag = true,         // press and hold or press and drag the button to aim and release on an action
} = {}) {

Sweep

A round button that opens a ring of actions as a radar arm sweeps past each one

10.7 KB0 depsNavigation

index.html

<nav class="zipper" aria-label="Menu">
  <button class="zipper-pull" type="button" aria-expanded="false" aria-controls="zipper-links" aria-label="Menu">
    <span class="zipper-slider"></span>
    <span class="zipper-bail"></span>
    <span class="zipper-tag"></span>
  </button>
  <div class="zipper-body">
    <div class="zipper-lining"></div>
    <ul class="zipper-links" id="zipper-links">
      <li class="zipper-item"><a class="zipper-link" href="#home">Home</a></li>
      <li class="zipper-item"><a class="zipper-link" href="#shop">Shop</a></li>

zipper.css

.zipper-link {
  position: relative;
  display: inline-block;
  padding: 2px 8px;
  margin: -2px -8px;
  border-radius: 8px;
  color: var(--zipper-ink);
  text-decoration: none;
  font: 600 var(--zipper-link-size)/1.2 var(--zipper-font);
  letter-spacing: -.012em;
  white-space: nowrap;

zipper.js

export function init(root, { onOpen, onClose, onSelect, threshold = 0.4 } = {}) {
  const $ = s => root.querySelector(s);
  const body = $('.zipper-body');
  const pull = $('.zipper-pull');
  const slider = $('.zipper-slider');
  const tag = $('.zipper-tag');
  const list = $('.zipper-links');
  const items = [...root.querySelectorAll('.zipper-item')];
  const links = [...root.querySelectorAll('.zipper-link')];
  const teethBox = $('.zipper-teeth');
  const flaps = ['l', 'r'].map(s => ({

Zipper

A side menu you unzip: drag the pull down and the teeth part to reveal the links

9.8 KB0 depsNavigation

All components

Navigation.

Abacus

Aperture

Dimple

Fresnel

Lantern

Loupe

Marble

Pinch

Plumb

Siphon

Sumi

Sweep

Zipper

Your cart

Saved for later