---
title: "Frosted Nav — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Tamás Péter · Navigation. Floating glass nav bar with menu"
canonical: "https://framer.elliotli.dev/component/frosted-nav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Frosted Nav

# Frosted Nav

Floating glass nav bar with menu

[View on Framer](https://framer.com/marketplace/components/frosted-nav/?via=elliot-li)

![Frosted Nav preview image 1](https://framer.elliotli.dev/og/component/frosted-nav/a8a0a1e37a06da93/1600x1202.jpg)

## Summary

Floating glass nav bar with menu

## Description

A navigation bar that floats over your page in frosted glass, hides as visitors scroll down and returns as they scroll up. Drop it on a page, type your links in the panel, and it works - no setup, no code.

**The bar**

-   Pill-shaped links in frosted glass, over any background
    
-   One Frost slider controls the glass - blur, saturation and brightness move together
    
-   Wordmark in the centre, or a logo: upload an image or paste SVG code
    
-   Pasted SVG can be recoloured to any colour, strokes included
    
-   Booking button on the right, outlined or solid
    
-   Optional secondary link beside the main set
    
-   Add as many links as you need
    

**Where it sits**

-   Hold it at any height on the screen - 0% is the top, 50% the middle, 100% the foot
    
-   Preview that position on the canvas instead of publishing to find out
    
-   Hide-on-scroll leaves by whichever edge it is nearest to
    
-   Offset in pixels for the fine adjustment
    

**The menu**

-   Set the burger width in pixels: below it the bar becomes a menu button
    
-   Set it above your widest breakpoint and every visitor gets the burger - a look in its own right
    
-   Full-screen menu with its own type, colours and two call-to-action buttons
    
-   Page scroll locks while it is open
    

**Made to customise**

-   Type any Google Font name and it loads automatically
    
-   Full control over sizes, spacing, padding and letter spacing
    
-   84 panel controls, grouped into Links, Brand, Bar, Book Button, Typography, Menu and Behaviour
    
-   Respects reduced-motion settings; animation can be turned off entirely
    

Responsive across desktop, tablet and mobile.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2737

## Details

- **Author**: Tamás Péter
- **Price**: $10.00
- **Published**: 2026-08-13
- **Updated**: 2026-08-13
- **Added**: 2026-08-13
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation