Mega menu

The panel a navigation dropdown opens: zones of columns, each column a run of labelled rows carrying an icon, a title, and a line of description. Rows are polymorphic through `render`. Pair it with NavigationMenu and MegaMenuTrigger. MegaMenuList shares a sliding layoutId indicator across triggers; NavigationMenu keeps one viewport that morphs between sections; columns spring in with a stagger. Standalone, the panel paints its own surface; inside NavigationMenu the positioner already does.

Vehicle data

History & safety

Installation

Import from the package. Do not run shadcn add in your app.

tsx

import { MegaMenu } from "@carsxe/design-system/components/mega-menu"

Usage

tsx

import {
  MegaMenu,
  MegaMenuColumn,
  MegaMenuGroup,
  MegaMenuGroupLabel,
  MegaMenuItem,
  MegaMenuList,
  MegaMenuTrigger,
} from "@carsxe/design-system/components/mega-menu"
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
} from "@carsxe/design-system/components/navigation-menu"

<NavigationMenu>
  <MegaMenuList>
    <NavigationMenuItem>
      <MegaMenuTrigger>Products</MegaMenuTrigger>
      <NavigationMenuContent>
        <MegaMenu>
          <MegaMenuColumn>
            <MegaMenuGroup>
              <MegaMenuGroupLabel>Vehicle data</MegaMenuGroupLabel>
              <MegaMenuItem
                href="/vin-decoder"
                title="VIN Decoder"
                description="Decode any VIN to full specs."
                icon={<ScanLineIcon />}
              />
            </MegaMenuGroup>
          </MegaMenuColumn>
        </MegaMenu>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </MegaMenuList>
</NavigationMenu>

Sliding indicator and morphing panel

Zones split by a hairline

Vehicle data

History & safety

All products

Widgets

All widgets

Browse

One unlabelled column

All industries

Your own link element

API Reference

Prop	Type	Default
MegaMenuTrigger	NavigationMenu.Trigger props	drop-in for NavigationMenuTrigger
MegaMenuList	NavigationMenuList props	scopes the sliding trigger indicator
MegaMenuItem · title	ReactNode	—
MegaMenuItem · description	ReactNode	—
MegaMenuItem · icon	ReactNode	no chip rendered
MegaMenuItem · render	ReactElement \| ((props, state) => ReactElement)	<a>
MegaMenuLink · render	ReactElement \| ((props, state) => ReactElement)	<a>
MegaMenuMore · render	ReactElement \| ((props, state) => ReactElement)	<a>
MegaMenuSeparator · orientation	"vertical" \| "horizontal"	"vertical"
splitIntoColumns(items, columnCount)	(items: readonly T[], columnCount: number) => T[][]	—