Is the mega menu accessible?

Yes. Panels open on hover and on keyboard focus, arrow keys move along the bar, Escape closes the open panel, and a short close delay forgives diagonal mouse movement so menus do not snap shut on the way to a link.

Does Navbar Mega Menu work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Navbar Mega Menu

A full-width bar with a mega menu that unfolds on hover or focus.

Type: Navbar section
Styles: Enterprise, Light
Licence: Charcoal UI Pro

About Navbar Mega Menu

Navbar Mega is a full-width bar with a mega menu that unfolds on hover or focus.

It is a full-width navbar section for React and Tailwind CSS 4, in a enterprise and light style. Preview it at any width above, then install it with one command.

When to use Navbar Mega Menu

Enterprise sites.
Products with many sections.
Ecommerce headers.
Developer platforms.

How it is built

Panels open on hover and focus with a forgiving close delay and close on Escape.

It is composed from Button, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Navbar Mega Menu

Navbar Mega Menu is part of 3 full templates, so you can see it in a finished page.

Ashfall template: Work first. Words second.
Cinder template: Serious numbers, calmly presented.
Sable template: Enterprise security without the theatre.
Navbar Floating: A floating glass React navbar that hides on scroll with a mobile sheet
Navbar Announcement: A React navbar with a dismissible announcement bar, Cmd+K search and sheet
Navbar Centered: An editorial shop React navbar with a centred serif wordmark that shrinks
Button: An animated React button with six variants, spring press feedback and a width-stable loading state

Install Navbar Mega Menu

npx shadcn@latest add @charcoal/navbar-mega

Navbar Mega Menu is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Is the mega menu accessible?: Yes. Panels open on hover and on keyboard focus, arrow keys move along the bar, Escape closes the open panel, and a short close delay forgives diagonal mouse movement so menus do not snap shut on the way to a link.
Does Navbar Mega Menu work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.

Navbar Mega Menu as Markdown