Chapter 6: Navigation

Core Idea

Navbars, docks, and sidebars — the chrome components users navigate the site with, most of them reacting to scroll or hover.

Reference Table

Name	Purpose	Install
Floating Navbar	Sticky navbar that hides on scroll-down, reveals on scroll-up	npx shadcn@latest add @aceternity/floating-navbar
Navbar Menu	Navbar whose children animate open on hover ("big nav")	npx shadcn@latest add @aceternity/navbar-menu
Notch	Floating configurable notch (top or bottom) with animated active-item state	npx shadcn@latest add @aceternity/notch
Resizable Navbar	Navbar that changes width on scroll	npx shadcn@latest add @aceternity/resizable-navbar
Sidebar	Expandable sidebar (hover to expand), responsive, dark-mode aware	npx shadcn@latest add @aceternity/sidebar
Following Pointer	Custom cursor that follows the mouse and animates its content	npx shadcn@latest add @aceternity/following-pointer
Layout Text Flip	Text-flip effect that reflows surrounding layout as it changes	npx shadcn@latest add @aceternity/layout-text-flip

Key Takeaways

1. Resizable Navbar and Floating Navbar solve different problems: Resizable changes width/shrinks on scroll (desktop marketing sites), Floating Navbar hides/reveals entirely (mobile-first or content-heavy pages).
2. Sidebar is the one dashboard-oriented nav component in the free tier — for a marketing navbar, reach for one of the navbar variants instead.
3. Following Pointer replaces the OS cursor — use sparingly and only on sections designed around it, since it can hurt usability if applied site-wide.

Connects To

• ch009 (Loaders, Modals & Tabs): Animated Tabs, a related navigation-adjacent interaction.