Mega Menu Navbar

Responsive SaaS navbar with rich dropdowns and a mobile drawer

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/mega-menu-navbar.json

Preparing preview…

Installation

Run the following command

npx shadcn@latest add https://raw.githubusercontent.com/Ashutoshx7/VengeanceUI/main/public/r/mega-menu-navbar.json

Usage

code

1import { MegaMenuNavbar } from "@/components/ui/mega-menu-navbar"
2
3export function MegaMenuNavbarDemo() {
4  return (
5    <MegaMenuNavbar
6      brandName="VengeanceUI"
7      brandHref="/"
8      pricingHref="/templates"
9      loginHref="/docs"
10      ctaHref="/components"
11      ctaLabel="Browse components"
12    />
13  )
14}

Props

Prop Name	Type	Default	Description
brandName	`string`	`'VengeanceUI'`	Brand text displayed beside the logo.
brandHref	`string`	`'/'`	Destination used by the brand link.
logo	`React.ReactNode`	`VengeanceUI logo`	Optional custom logo rendered before the brand name.
features	`MegaMenuItem[]`	`Sample feature set`	Items shown in the two-column Features mega-menu.
useCases	`MegaMenuItem[]`	`Sample use cases`	Items shown in the Use Cases dropdown.
resourceGroups	`MegaMenuResourceGroup[]`	`Sample groups`	Grouped links shown in the Resources mega-menu and mobile accordion.
pricingHref	`string`	`'/templates'`	Destination of the Templates link.
loginHref	`string`	`'/docs'`	Destination of the documentation action.
ctaHref	`string`	`'/components'`	Destination of the primary call to action.
ctaLabel	`string`	`'Browse components'`	Text shown in the primary call to action.
className	`string`	`-`	Additional classes for the root header.

MegaMenuItem Interface

Prop Name	Type	Default	Description
title	`string`	`-`	Visible item label.
description	`string`	`-`	Optional supporting copy.
href	`string`	`-`	Navigation destination.
icon	`LucideIcon`	`-`	Optional Lucide icon component.
iconClassName	`string`	`-`	Optional icon color or styling classes.
badge	`string`	`-`	Optional compact status badge.

MegaMenuResourceGroup Interface

Prop Name	Type	Default	Description
title	`string`	`-`	Heading displayed above the group.
links	`MegaMenuItem[]`	`-`	Links contained in the group.

Credits

contributor

ALI-OUALA

Designed and contributed this component to the Vengeance UI catalog.

GitHub

Loading component…

Components /Mega Menu Navbar