---
title: "Morph NavBar — Free Framer component · Best of Framer"
description: "Free Framer component · by Abdelkader Charef Eddine Djellil · Navigation. Morphing navigation bar"
canonical: "https://framer.elliotli.dev/component/morph-navbar"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Morph NavBar

# Morph NavBar

Morphing navigation bar

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

![Morph NavBar preview image 1](https://framer.elliotli.dev/og/component/morph-navbar/42a35d34e72d2e31/1600x1200.jpg)

## Summary

Morphing navigation bar

## Description

This component is a **scroll-reactive navigation bar**. It is a single, smart user interface element that watches how far a user scrolls down a webpage.

When the page is at the very top, the navigation bar stays hidden, and a large sign-up or action button sits normally in the middle of the main screen. The moment the user scrolls down past that first section, the navigation bar smoothly slides down from the top of the screen to stick there. As it appears, the main button from the screen dynamically shrinks and flies right into the navigation bar, locking into place as a small menu item. If the user scrolls back up, the button flies back out to its original spot, and the navigation bar disappears.

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

-   All · #4352

## Details

- **Author**: Abdelkader Charef Eddine Djellil
- **Published**: 2026-07-12
- **Updated**: 2026-08-13
- **Added**: 2026-07-12
- **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