Adaptive Glass Nav

Adaptive Glass Nav

A nav that reads what's behind it. The bar samples the pixels underneath as you scroll and switches between light and dark glass on its own, so it stays readable over an image, a video, or a dark section without you building a variant for each one. Tap it and it grows into a dark panel with oversized split-text links.

Features

• Automatic light and dark switching, no scroll offsets to maintain

• Reads images, video, background images, and stacked translucent layers

• Force any section with a Dark IDs list or a data attribute

• Lock it to Light or Dark instead if you'd rather set it yourself

• Up to 8 primary links with split-text reveal, by letter, word, or line

• Secondary column, contact rows, and a CTA

• Page dims and blurs behind the open menu

• Pins itself left, center, or right with your own offsets

• Separate colors and fonts for every state

• Current page is detected and marked automatically

Setup

Drop it on the page and set your offsets. The layer you place is only an anchor, the live bar pins itself to the viewport, so it can sit anywhere in the layout. No overrides, no code editing.

Good to know

• Rendered to the top of the document, so no parent frame can clip or stack over it

• Scroll locks while the menu is open, including smooth scroll setups like Lenis

• Scrollbar width is padded back in, so the page never jumps on close

• Sampling needs images that allow cross origin reads. Framer hosted media works, external CDNs may need the Dark IDs list

• Set Theme to Light or Dark to skip sampling entirely