Docs / Components / Liquid navbar

Liquid navbar

A liquid-glass navbar that refracts the real page behind it: a WebGL lens magnifies, bends content in at the rim with a colour fringe, frosts and lights the glass. Drop-in HTML, no framework.

Liquid navbar New

The same floating navbar with real liquid glass, in any browser with WebGL. The page is photographed once in idle time with modern-screenshot (loaded on demand from jsDelivr with an integrity hash), and every frame the strip behind the bar goes through a WebGL lens: a slab that magnifies slightly, a curved rim that bends content in from beyond the edge with a colour fringe, a frosted veil, a key light top-left and a fresnel edge. Until the picture is ready it is frosted glass. The landing page uses it.

<header class="ace-navbar-liquid" data-glass-exclude>
  <nav class="ace-navbar-liquid-bar" aria-label="Main">
    <div class="ace-navbar-liquid-row">
      <a class="ace-navbar-liquid-brand" href="/">
        <span class="ace-navbar-liquid-logo" aria-hidden="true"><svg …/></span>Acme
      </a>
      <ul class="ace-navbar-liquid-links">
        <li><a href="/models">Models</a></li>
        <li><a href="/pricing" aria-current="page">Pricing</a></li>
      </ul>
      <div class="ace-navbar-liquid-actions">
        <a class="ace-navbar-liquid-signin" href="/signin">Sign in</a>
        <button class="ace-navbar-liquid-icon" type="button" aria-label="Theme"><svg …/></button>
        <a class="ace-navbar-liquid-cta" href="/signup">Get started</a>
        <button class="ace-navbar-liquid-toggle" type="button" aria-label="Menu"></button>
      </div>
    </div>
  </nav>
</header>
<script src="ace-navbar-liquid.js" defer></script>

<!-- Self-host modern-screenshot instead of jsDelivr: -->
<script src="ace-navbar-liquid.js" data-screenshot-src="/js/modern-screenshot.js" defer></script>

<!-- After big content changes (new section loaded, tabs switched): -->
AceNavbarLiquid.refresh()

Keep data-glass-exclude on the header (and on any other fixed overlay) so it isn't photographed into its own glass.
Call AceNavbarLiquid.refresh() after content changes that don't change the page height.

Don't

Expect live video or animations to show through: the glass bends a picture of the page, refreshed on theme, width and height changes.
Use it where third-party scripts are not allowed; use ace-navbar there.

Use it

One stylesheet and one script from the CDN, pinned to v1.3.0:

<link rel="stylesheet" href="https://acecss.dev/v1.3.0/ace.min.css"
      integrity="sha384-zHAwOqjifsc0D+iUvzD1a4W0R2g0BOK9AqQJZGakUEp/Tm5IUcP07R9xkY0q/stj" crossorigin="anonymous">
<script src="https://acecss.dev/v1.3.0/ace-navbar-liquid.min.js" defer
        integrity="sha384-MPTj6aPtC7rgAi9qb4oqsdojHuP2ybdc1Rcz8S536m6iEbebzPF7bAAZkhr9EZx7" crossorigin="anonymous"></script>

Or from npm:

npm i @acecss/core

import '@acecss/core'
import '@acecss/core/navbar-liquid'

Bundlers, Tailwind, every script in one file and self-hosting: Install.

More components

ButtonsCopy-paste CSS buttons with primary, secondary and danger styles, five colours, any brand colour via one variable, four sizes, icon buttons and a loading state. Dark mode built in, no JavaScript.

Hero buttonA sparkle call-to-action button for landing pages: a dark pill that turns brand-coloured on hover, with twinkling stars, a spark line round the edge and particles. No GSAP, respects reduced motion.

NavbarA sticky floating glass navbar: blurred, tinted pill with a sliding hover highlight, a raised shadow on scroll and a mobile menu that unfolds inside the pill. Framework-free, dark mode included.

Segmented controlA segmented control for switching views or options: a row of AceCSS buttons with aria-pressed, in three sizes and a full-width variant. Accessible, dark-mode ready, no JavaScript needed for the styles.

InputsAccessible CSS text inputs with labels, hints, required markers and error states, plus inputs with icons, prefixes and suffixes. Works with plain HTML forms and any framework.

Select & dropdownStyle native selects and textareas, or turn any <select> into a searchable dropdown with sub-labels and option groups. About 3 KB of JavaScript, keyboard accessible, no dependencies.

Date pickerA dependency-free date picker and pick-up → return date range picker with times, min and max dates, locales and a change event. Dates can be typed or picked. About 5 KB of JavaScript, dark mode ready.

Checkbox, radio & switchStyled native checkboxes, radio buttons and toggle switches in pure CSS: accessible labels, focus rings and dark mode, with no JavaScript.

BadgesStatus badges in pure CSS: neutral, primary, success, warning, danger and info, in two sizes, with contrast checked for white text.

Choice cardsSelectable cards for plans, extras or options: built on AceCSS buttons, selected with a class, aria-pressed or a checked radio inside. Pure CSS, accessible, dark mode ready.