Mega menu

Sticky header with full-bleed mega-menu panels.

Usage

import { NavbarMenu } from '@/components/blocks/navbar-02'


<NavbarMenu />


// Swap in your own content
<NavbarMenu
  brandName="Launchpad"
  items={[
    {
      label: 'Products',
      groups: [
        {
          label: 'Platform',
          links: [
            { label: 'Hosting', href: '/hosting' },
            { label: 'Analytics', href: '/analytics' },
          ],
        },
        {
          label: 'Tools',
          links: [{ label: 'Status page', href: 'https://status.example.com', external: true }],
        },
      ],
    },
    { label: 'Pricing', href: '/pricing' },
  ]}
  actions={[
    { label: 'Log in', href: '/login', variant: 'secondary' },
    { label: 'Get started', href: '/signup', variant: 'primary' },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/navbar-02

npx shadcn@latest add @pastaui-pro/navbar-02

yarn dlx shadcn@latest add @pastaui-pro/navbar-02

bunx --bun shadcn@latest add @pastaui-pro/navbar-02

Source

Props

Mega menu props
Prop	Type	Default	Description
logo	ReactNode	= Half-filled circle mark	Mark shown before the brand name.
brandName	string	= 'Keelson'	Wordmark text next to the logo, also the link’s accessible name.
logoHref	string	= '/'	Where the logo links to.
items	NavbarMenuItem[]	= Products / Resources / Customers / Pricing	Top-level items. Give an item an href for a plain link, or groups ({ label, links }) for a mega-menu panel. Links accept external: true to open in a new tab with an arrow.
actions	NavbarMenuAction[]	= Book a demo / Log in / Start free	Buttons on the right, each with label, href, and variant ('primary' \| 'secondary'). The first primary action stays visible next to the menu button on mobile.
className	string	= —	Additional classes for the header.