Siphon

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

A UI component for any site
Plain HTML, CSS, JavaScript and SVG, no dependencies
Use it in unlimited client projects

Checkout opens soon.
14-day refund if it doesn’t do what the demo shows.

BundleAll navigation: 13 pieces for $120, you save $30

Siphon: a look at the source

// Siphon — glass navigation bar whose highlight pours from link to link. No dependencies.
// The highlight is one liquid body drawn as a single SVG path every frame. It has a
// head (the pool forming under the new link) and a tail (what is left under the old
// one), each on its own spring: the head is stiff, the tail soft and slow to let go.
// While they are close a neck joins them; when the gap grows past a threshold the neck
// snaps, the tail shrinks to a drop that catches up, and the pool wobbles as it lands.
// A copy of the links in the "ink" colour is clipped by the same path, so labels are
// dyed exactly where the liquid touches them.

const HEAD = { k: 420, c: 34 };      // stiffness, damping → response ≈ 0.31 s, a touch of overshoot
const TAIL = { k: 240, c: 27 };      // softer and slower than the head: that lag is the pour
const TRAIL = { k: 90, c: 19 };      // the tail while the pool is held: lazier, so a neck trails the finger
const WOB = { k: 520, c: 15 };       // the pool's jelly settle after a drop lands (ζ ≈ 0.33)
const CLING = 50;                    // ms the old pool holds on before it starts to follow
const SNAP = 2;                      // neck breaks when the gap is this many bar heights
const DROP = 0.34;                   // drop diameter as a share of the bar height
const LEAN = 0.06;                   // how far the pool leans toward a hovered link
const FADE_OUT = 90, FADE_IN = 170;  // keyboard and reduced-motion changes crossfade instead
const SLOP = 8;                      // px a press must travel sideways before it becomes a drag
const PROJECT = 0.12;                // seconds of momentum projected forward on release
const WINDOW = 80;                   // ms of pointer history used for release velocity
const EASE = 'cubic-bezier(.23, 1, .32, 1)';
const NS = 'http://www.w3.org/2000/svg';

let uid = 0;
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
const lerp = (a, b, t) => a + (b - a) * t;
// soft edge: the further past the end, the less the liquid follows
const rubber = (over, dim) => (over * dim * 0.55) / (dim + 0.55 * Math.abs(over));
const step = (s, target, { k, c }, dt) => { s.v += (-k * (s.x - target) - c * s.v) * dt; s.x += s.v * dt; };

// a horizontal capsule, drawn clockwise (top edge left → right) so every piece shares one winding
function capsule(cx, cy, w, h) {
  const r = Math.min(h, w) / 2, x0 = cx - w / 2 + r, x1 = cx + w / 2 - r;
  return `M${x0} ${cy - r}H${x1}A${r} ${r} 0 0 1 ${x1} ${cy + r}H${x0}A${r} ${r} 0 0 1 ${x0} ${cy - r}Z`;
}

// the liquid bridge between the right cap of A and the left cap of B, also clockwise
function neck(a, b, cy, n) {
  const ra = Math.min(a.h, a.w) / 2, rb = Math.min(b.h, b.w) / 2;
…  361 more lines in the zip

/* Siphon — a glass navigation bar whose highlight pours from link to link like honey */
.siphon {
  /* colour: every token is light-dark(light, dark); data-theme or the system setting picks one */
  --siphon-ink: light-dark(#1d140c, #f6efe6);
  --siphon-muted: light-dark(#6b5c4f, #b0a395);
  --siphon-focus: light-dark(#0a66d8, #7cbcff);
  --siphon-glass: light-dark(rgb(255 251 246 / .56), rgb(36 27 22 / .5));
  --siphon-glass-solid: light-dark(#f7f1ea, #231a15);
  --siphon-sheen: light-dark(rgb(255 255 255 / .5), rgb(255 240 225 / .08));
  --siphon-blur: blur(26px) saturate(170%);
  --siphon-rim-top: light-dark(rgb(255 255 255 / .95), rgb(255 236 214 / .2));
  --siphon-rim-bottom: light-dark(rgb(255 255 255 / .35), rgb(255 236 214 / .05));
  --siphon-hairline: light-dark(rgb(60 35 10 / .09), rgb(255 236 214 / .08));
  --siphon-shadow: light-dark(rgb(70 40 10 / .38), rgb(0 0 0 / .78));
  --siphon-hover: light-dark(rgb(60 35 10 / .05), rgb(255 236 214 / .06));
  /* the liquid: lit from above, glowing brighter at the bottom where light scatters through it */
  --siphon-honey-top: light-dark(#f29a14, #ffad2e);
  --siphon-honey-mid: light-dark(#ea8306, #f28c0c);
  --siphon-honey-low: light-dark(#ffc85a, #ffd06e);
  --siphon-on-honey: #2a1500;
  --siphon-gloss: light-dark(.62, .5);
  --siphon-rim: light-dark(rgb(255 246 222 / .75), rgb(255 238 200 / .55));
  --siphon-glow: light-dark(rgb(196 98 0 / .32), rgb(255 150 30 / .42));
  /* size */
  --siphon-h: 44px;
  --siphon-pad: 6px;
  --siphon-font: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;

  display: inline-block;
  max-width: 100%;
  font-family: var(--siphon-font);
  color-scheme: light dark;
}
[data-theme="light"] .siphon, .siphon[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] .siphon, .siphon[data-theme="dark"] { color-scheme: dark; }

/* the bar: frosted glass with a bright top rim and a faint bottom bounce */
.siphon-bar {
  position: relative;
  display: flex;
…  180 more lines in the zip

Ask a question

What it does

A floating frosted-glass navigation bar with a pool of glossy amber liquid under the current link and a sun / moon theme switch at the end. Choose another link and the liquid doesn't slide, it pours: the front runs ahead to the new link while the rest clings for a moment, then follows through a neck that stretches and thins. On a short hop the neck holds and the liquid flows over in one piece. On a long hop it snaps, what's left rolls into a drop, chases the pool and lands in it, and the pool wobbles once. Labels and icons are dyed dark exactly where the liquid touches them, so you can watch the drop pass over a word. The liquid has a gloss band on top, a brighter base as if lit through, and casts a warm glow on the glass.

Good for: The main menu of a website, portfolio, studio or product site; app-style web UIs that want a bar with personality.
How it works: Tap or click a link and the pour starts on press, so the bar answers instantly; the link then navigates as normal. Or grab the liquid with the mouse or a finger and drag it: the pool stays under the pointer 1:1 while a neck and a drop trail behind, it stretches and resists past the ends, and on release it keeps your speed and settles on the nearest link (a quick flick moves it on). Click again mid-pour and the liquid turns from wherever it is. Hover a link with a mouse and the pool leans a few pixels toward it. The theme button flips your page between light and dark.
How to use: Copy two files, paste the markup, call init(). Your links stay ordinary <a href> links; onChange reports the new one. Swap in your own icons on a 24px grid.

Price: $12, one payment
Version: 1.0.0
Code size: 9.2 KB gzipped
Dependencies: None
Built with: HTML, CSS, JavaScript, SVG
Category: Navigation
Licence: Unlimited personal and client projects
In the zip: siphon.css siphon.jsthe component
index.htmla plain example page
README.mdsetup, CSS variables, options, icon guide, React notes
package.json vite.config.js npm install npm run dev
LICENSE.md

Use it in your project

Copy siphon.css and siphon.js into your project.
Add the markup from index.html (the block between the COMPONENT comments).
Start it:

import { init } from './siphon.js';
const siphon = init(document.querySelector('.siphon'), {
  onChange: (index, value) => console.log(index, value),
});

Mark the current page's link with aria-current="page". Each link's data-value is passed to onChange. The links are ordinary <a href> links: the highlight starts pouring on press and the browser still follows the link on click. The liquid can also be grabbed: press anywhere on the links and drag sideways, and the pool follows your finger or mouse 1:1 while the rest of it trails behind; let go and it settles on the nearest link, carried a little further by a throw. A drag never follows a link. In a single-page app, call event.preventDefault() in your own click handler and route as usual.

useEffect(() => {
  const siphon = init(ref.current, { onChange });
  return () => siphon.destroy();
}, []);

Questions

What exactly do I get?

The full source, an example page and a README. No account, no framework.

Can I use it in client projects?

Yes, in unlimited projects. You can't resell or share the source itself.

Is the liquid a video or an image?

Neither. It is one SVG path rebuilt every frame from two springs, so it follows every click, even a change of mind halfway.

Can I change the colour?

Yes. Three CSS variables set the liquid from top to bottom; one more sets the label colour on it. Make it honey, mint, cherry or your brand colour.

Can I use my own icons?

Yes. Inline SVG on a 24px grid. Give the silhouette class="siphon-shape" and inner lines class="siphon-cut"; the README shows the pattern.

Do I have to use the theme switch?

No. Pass theme: false or delete the button. If you keep it, it sets data-theme on <html> and tells you through onTheme.

Is it keyboard accessible?

Yes. It is a nav of real links: Tab to them, Left / Right / Home / End to move, Enter to follow. The current page is marked with aria-current="page".

Light and dark?

Both are designed: warm white glass by day, smoked glass at night, each with its own liquid shade. With no theme set it follows the system setting.

Reduced motion?

The liquid crossfades to the new link instead of pouring. Keyboard changes crossfade too. With reduced transparency the glass turns solid.

Can I drag it?

Yes, with a mouse or a finger. Dragging moves the liquid and picks the link where you let go; it never opens the link, so a swipe can't navigate by accident.

Does it work on phones?

Yes. It responds on touch-down, you can swipe the liquid along the bar, vertical swipes still scroll the page, and under 440px the labels hide so the bar shows icons only and fits a 320px screen.

What if it doesn't work for me?

If it doesn't work like the demo, you get a refund within 14 days.

Still have a question? Email us. The person who made it answers.

More like Siphon

All navigation

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

$15

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

9.8 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

$12

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

$12

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

$12

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

10 KB0 depsNavigation

What it does

Use it in your project

Questions

More like Siphon

Zipper

Aperture

Dimple

Fresnel

Your cart

Saved for later

What it does

Specs

Use it in your project

Questions

More like Siphon

Zipper

Aperture

Dimple

Fresnel