---
title: "Navbar Pill — Free Framer component · Best of Framer"
description: "Free Framer component · by Francisc Toth · Navigation. Pill navbar with mega menus"
canonical: "https://framer.elliotli.dev/component/navbar-pill"
---

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

# Navbar Pill

Pill navbar with mega menus

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

![Navbar Pill preview image 1](https://framer.elliotli.dev/og/component/navbar-pill/6ae48e5b22c802a3/1600x1200.jpg)

## Summary

Pill navbar with mega menus

## Description

A floating pill navigation bar with hover mega-menu panels on desktop and a real accordion drawer on mobile. Drop it in, point the menu at your pages, and match it to your brand with six colour controls and two font controls.

-   Mega-menu panels. Each menu item can open a panel with an eyebrow, a blurb, a "view all" link and a two-column grid of titled sub-links. Items without sub-links stay plain links.
    
-   Sub-links from one text field. Type Label|Description|/link, one per line. The description and the link are both optional.
    
-   A real mobile drawer. Below a width you set, the bar collapses to a burger and opens an accordion drawer with expanding sub-items and an optional full-width button.
    
-   Container-based, not viewport-based. It measures its own width, so it collapses correctly inside a sidebar, a modal or a narrow section, and it shows the right state on the canvas at every breakpoint.
    
-   Six colours, two fonts. Bar, panel, text, muted, accent and on-accent, plus separate nav and panel typography. Borders, hover states and separators derive from those automatically.
    
-   Shape controls. Bar height, max width, corner radius, panel offset, and a separate panel radius cap so a full pill bar does not round the panel away.
    
-   Hover or click, and accessible either way. Real buttons for the triggers, aria-expanded and aria-controls, visible focus rings, Escape and outside-click to close, and a prefers-reduced-motion fallback.
    

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

-   All · #2680

## Details

- **Author**: Francisc Toth
- **Published**: 2026-09-10
- **Updated**: 2026-09-14
- **Added**: 2026-09-10
- **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