---
title: "Halo NavBar — Framer component · Best of Framer"
description: "$18.00 · Framer component · by Saira Fayyaz · Navigation. Smooth animated navbar for Framer!"
canonical: "https://framer.elliotli.dev/component/halo-navbar"
---

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

# Halo NavBar

Smooth animated navbar for Framer!

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

![Halo NavBar preview image 1](https://framer.elliotli.dev/og/component/halo-navbar/5dcd7f75b6de7ffa/1600x900.jpg)

## Summary

Smooth animated navbar for Framer!

## Description

Halo Nav is a premium animated Framer navigation component designed to transform as visitors scroll.

At the top of the page, it appears as a clean, wide editorial navbar with a light background, subtle active-link indicator, status message, and outlined CTA. Once the user starts scrolling, the navbar smoothly travels to the bottom of the screen and transforms into a compact dark floating pill with a stronger shadow, sage active state, filled CTA, and a more condensed layout.

It also includes a fully responsive mobile version with a compact floating navbar and a full-screen animated mobile menu.

You can customize the brand name, logo accent color, navigation links, link destinations, CTA text and link, availability/status message, navbar width and height, spacing, radius, scroll trigger, animation speed, bottom position, scale, and active-section tracking.

Built to work across desktop, tablet, and mobile, with smooth hover effects, responsive layouts, editable controls, and a dedicated static-renderer fallback for Framer.

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

-   All · #1983

## Details

- **Author**: Saira Fayyaz
- **Price**: $18.00
- **Published**: 2026-09-10
- **Updated**: 2026-09-10
- **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