Nyx UI

Navigation 9

A fixed floating navbar that shrinks on scroll, with hover mega-dropdowns featuring promo art panels and an animated mobile accordion.

nyx
Pricing
Get started

Scroll

Navigation 9 is a fixed floating navbar that shrinks as you scroll and opens hover mega dropdowns with promo art panels beside the links. The whole structure lives in one NAV_ITEMS array you edit directly, including icons and promo cards. Mobile collapses into an animated accordion. Built with Framer Motion and React. A premium header for product sites with deep navigation.

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

Usage

import { Navbar } from "@/components/pro/blocks/navigation-9/navbar";
<Navbar />

Customization

The nav structure lives in the NAV_ITEMS array at the top of the file. Each item can have:

  • children — dropdown links with an icon, title, and description
  • promo — a promo card with title, description, link, and decorative art ("blocks" or "showcase")

Edit this array to point the links at your own routes, and swap the icons from lucide-react.