---
title: "Navbar 02 — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Navigation. Navbar 02 Navbar02 is a premium floating capsule navigation component."
canonical: "https://framer.elliotli.dev/component/navbar-02"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Navbar 02

# Navbar 02

Expandable floating capsule navbar

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

![Navbar 02 preview image 1](https://framer.elliotli.dev/og/component/navbar-02/37f7ad1a5e2f9f70/1600x1200.jpg)

## Summary

Navbar 02 Navbar02 is a premium floating capsule navigation component.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**About Navbar 02**

Navbar02 is a premium floating capsule navigation component. It starts as a sleek, shrink-to-fit pill centered at the top of the page — logo on the left, “Menu” button on the right. One click expands the same capsule in place into a taller rounded panel with a clean stacked link list. No dropdown, no overlay, no layout shift. Perfect for modern portfolios, agencies, SaaS sites and high-end brand experiences.

**Key Features**

-   Floating shrink-to-fit capsule that expands in-place
    
-   Optional logo: pure text or Image/SVG upload with adjustable height
    
-   Three ready themes: Glass (blur), Paper (light) and fully Custom
    
-   Sticky mode + precise top offset control
    
-   Full Framer native Font pickers (extended controls) for logo, nav items and button
    
-   Complete color system — text, logo, nav links, button background & text
    
-   Accessibility-first: proper ARIA (aria-expanded, aria-haspopup, aria-controls), focus return, visible focus rings and prefers-reduced-motion
    
-   SEO-optimized with [Schema.org](http://schema.org/) SiteNavigationElement microdata so Google understands the navigation
    
-   Escape key + outside-click to close
    
-   Static-renderer safe — no animations or observers run in Framer canvas/export
    
-   Fully responsive — adapts to any screen width without horizontal scroll
    

**Use Cases**

-   Creative agency & studio websites
    
-   Portfolio & personal branding sites
    
-   SaaS marketing & product landing pages
    
-   Fashion, lifestyle and editorial magazines
    
-   Architecture & interior design portfolios
    
-   Tech startups and app showcase pages
    
-   Photography and visual storytelling sites
    
-   Event, conference and festival websites
    
-   E-commerce brand headers
    
-   Multi-language / international projects (RTL ready)
    

**Keywords**

floating navbar, capsule menu, expand in-place navigation, framer navbar component, sticky floating nav, glassmorphism navbar, paper theme menu, custom color navbar, image logo navbar, svg logo framer, accessible navigation

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

-   All · #8606

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-08-26
- **Updated**: 2026-09-30
- **Added**: 2026-08-26
- **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