Staaarter

Mega Menu Dropdown

A header with a real interactive nav trigger: clicking it opens a full-width dropdown panel with grouped links across three columns, each with a small section heading. Clicking the trigger again, or clicking anywhere outside the panel, closes it.

By Staaarter Team
Navbar
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/mega-menu-dropdown.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/navbar/navbar3.tsx instead.

Usage

The file also exports navbar3Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Navbar3, navbar3Demo } from "@/components/blocks/navbar/navbar3";

export default function Page() {
  return <Navbar3 {...navbar3Demo} />;
}

Props

PropTypeDefaultDescription
wordmarkstring"Ridgeline"Logo text rendered as a bold wordmark.
megaMenuLabelstring"Solutions"Label for the trigger that opens the mega menu.
groupsLinkGroup[]noneColumns of grouped links shown inside the open mega menu panel.
simpleLinks{ label: string; href: string }[]nonePlain nav links shown alongside the mega menu trigger.
cta{ label: string; href: string }noneThe call-to-action button on the right.
classNamestringnoneExtra classes for the outer header element.

Types

interface LinkGroup {
  heading: string;
  links: { label: string; href: string }[];
}

Behavior notes

  • The mega menu is a real, working toggle backed by useState: clicking the "Solutions" trigger opens the panel and sets aria-expanded="true" on it, clicking it again closes it.
  • A transparent full-screen backdrop button appears behind the open panel; clicking anywhere outside the panel (including it) closes the menu, this is a simple click-based dismissal rather than a full focus-trap or escape-key implementation.
  • The grouped links and simple links are plain Next.js Links with no real destinations until you supply your own hrefs; the CTA button performs no real action either.

More Navbar Blocks

View all →

Simple Logo Links CTA

Wordmark on the left, a row of nav links, and a single CTA button on the right.

Centered Logo Split Links

Logo centered in the header with nav links evenly split to its left and right.

Navbar With Search

Logo, a few nav links, and a labeled search input with an inline icon.

Two Tier Utility Nav

A thin utility link row above the main navigation row.

Minimal Logo CTA Only

The simplest possible header: just a logo and a single CTA button, no nav links.

Mobile Hamburger Menu

Wordmark, a CTA button, and a hamburger icon that toggles a vertical nav list open and closed.