Opal
A glass navigation bar with a soft stretchy highlight
A floating glass navigation bar that bends the background behind it like real glass. Good for: the menu of a website, app or portfolio. How it works: when the visitor picks a menu item, the highlight stretches toward it like a drop of liquid and then settles in place. How to use: copy the files into your page and change the menu links to your own. No libraries needed.
$4.20 — one-time price, free updates
- A UI component for any site
- Plain HTML, CSS and JavaScript · nothing to install
- Use it in unlimited client projects
Built with Plain JavaScript, CSS, SVG.
What is in the zip
- app.css
- app.js
- index.html
Version history
- v1.0.0, 2026-08-31 — First release. Opal shipped as one file, with the reel recorded from the real page.