---
title: "Modern Navbar — Free Framer component · Best of Framer"
description: "Free Framer component · by Kumar SK · Navigation · ranked #98 among Framer components. Overview Modern Navbar is a responsive navigation component built to create smooth and modern…"
canonical: "https://framer.elliotli.dev/component/modern-navbar"
---

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

# Modern Navbar

Modern hover navbar for clean websites

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

![Modern Navbar preview image 1](https://framer.elliotli.dev/og/component/modern-navbar/612c4e376d379f39/1600x1200.jpg)

## Summary

Overview Modern Navbar is a responsive navigation component built to create smooth and modern website experiences through interactive rolling hover effects.

## Description

## Overview

Modern Navbar is a responsive navigation component built to create smooth and modern website experiences through interactive rolling hover effects. The clean pill-style layout combined with customizable navigation links, CTA support, and logo integration helps create premium navigation systems for modern Framer websites.

## Getting Started

-   Add the component to your canvas
    
-   Replace the logo image from the property panel
    
-   Update navigation link text directly from the component
    
-   Customize CTA text and navigation colors easily
    
-   Add custom links for logo, navigation items, and CTA
    

## Customization

-   Edit navigation labels directly from the property panel
    
-   Customize navbar background and text colors
    
-   Adjust hover background color easily
    
-   Customize CTA background color
    
-   Replace logo image instantly from the component settings
    
-   Add custom links for navigation and CTA actions
    

## Property Controls

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-qioooett-txGb4XnxpYv2u2NnJBqUDY0zRDC2XB)

## Use Cases

-   Portfolio websites
    
-   Creative agency websites
    
-   Architecture studio websites
    
-   SaaS landing pages
    
-   Personal portfolios
    
-   Modern business websites
    

## Notes

-   Built using native Framer properties
    
-   Smooth rolling hover interaction
    
-   Responsive and lightweight structure
    
-   Minimal and modern visual style
    
-   Clean pill-style navigation layout
    

## Support

If you have any questions or need custom components, feel free to reach out at [**s.senthil2206@gmail.com**](mailto:s.senthil2206@gmail.com)

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

-   All · #98

## Details

- **Author**: Kumar SK
- **Published**: 2026-06-01
- **Updated**: 2026-05-30
- **Added**: 2026-05-23
- **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