Nyx UI

Navigation 5

A floating pill navbar that animates its width, condenses on scroll, and collapses into a mobile sheet.

nyx

Scroll

Navigation 5 is a floating pill navbar: it animates its width as the page loads, condenses as you scroll down, and collapses into a mobile sheet on small screens. Logo, links, search, theme toggle, and the mobile sheet are all baked in, so you edit the arrays and JSX to match your site. Built with Framer Motion and next-themes. A modern default navbar for docs and marketing sites.

Installation

Install dependencies.

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.

Usage

import { PillNavbar } from "@/components/pro/blocks/navigation-5/navbar";

Drop it at the top of your layout — everything (links, logo, search, theme toggle, mobile sheet) is baked in. Edit the arrays and JSX directly to match your site.

<PillNavbar />