---
title: "Navbar 03 — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Navigation. Pill navbar dropdown menus"
canonical: "https://framer.elliotli.dev/component/navbar-03"
---

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

# Navbar 03

Pill navbar dropdown menus

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

![Navbar 03 preview image 1](https://framer.elliotli.dev/og/component/navbar-03/32a44733b7448f2a/1600x1200.jpg)

## Summary

Pill navbar dropdown menus

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

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

**About Navbar03**

Navbar03 is a floating pill navigation bar with spring-animated dropdown menus. Build a polished site header that opens link lists or product card grids on hover, with a mobile hamburger sheet, three visual themes, and full property controls. Designed for production sites that need clear hierarchy, crawlable links, and a refined desktop-to-mobile experience.Semantic HTML, always-in-DOM submenu links, and optional JSON-LD SiteNavigationElement help search engines understand your structure. Accessibility features include ARIA attributes, keyboard focus rings, Escape to close, and a focus trap in the mobile dialog. Static renderer support keeps the canvas smooth.

**Features**

-   Floating centered pill navbar with soft shadow and optional logo
    
-   Hover dropdowns: simple link list or product grid with image, title, description
    
-   Spring motion on open; chevron rotate and hover accent on list items
    
-   Paper, Glass (frosted), and Custom color themes
    
-   Native Framer Font controls for nav and logo (extended)
    
-   Customizable pill shadow, dropdown shadow, margin X/Y, padding, max width
    
-   Dropdown text and muted description colors from the panel
    
-   Mobile hamburger with top sheet, accordion submenus, backdrop, body scroll lock
    
-   Configurable mobile breakpoint
    
-   SEO: ul/li structure, submenu links always in the DOM, JSON-LD, optional site origin for absolute URLs
    
-   A11y: aria-expanded, aria-haspopup, dialog role, focus management
    

**Use Cases**

-   Agency and studio marketing sites
    
-   SaaS product and pricing pages
    
-   E-commerce and product catalog headers
    
-   Portfolio and personal brand sites
    
-   Startup landing pages
    
-   Design system and component showcase sites
    
-   Blog and content platform headers
    
-   Education and course marketing sites
    
-   Multi-service business websites
    

**Keywords**

navbar, pill navbar, floating navigation, dropdown menu, mega menu lite, product grid dropdown, link list dropdown, mobile hamburger menu

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

-   All · #8058

## 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