Nyx UI

Navigation 10

A rounded navbar with ridge shadows and dual-column mega-menu dropdowns featuring a blog panel, directional panel transitions, and a mobile accordion.

nyx
Sign in

Scroll

Navigation 10 is a rounded navbar with layered ridge shadows and dual column mega menu dropdowns: two headed link columns, an optional blog promo panel with an image, and directional panel transitions as the cursor moves between triggers. Mobile collapses into an accordion. The whole structure is two arrays at the top of the file. Built with Framer Motion and React. A content rich header for blogs and product 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

Usage

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

Customization

The nav structure lives in NAV_CONFIGS and NAV_LINKS at the top of the file:

  • Each config has two columns with their own headings and icon-link items
  • The optional blog object renders a promo panel with an image — point image at your own asset
  • Plain links (no dropdown) go in NAV_LINKS

Swap icons from lucide-react and update hrefs to match your routes.