XDSTopNavMegaMenu@xds/core · TopNav
Preview coming soon

Usage

TopNav is a horizontal navigation bar for product-level navigation in application headers. Use TopNav for 5 or fewer always-visible navigation items, or minimal navigation paired with search and controls. For complex navigation hierarchies, use a sidebar; to filter content, use tabs or filter buttons instead.

Best practices

GuidancePractices
DoInclude a product logo and name in the heading slot to clearly identify the application.
DoLimit primary navigation items to 5 or fewer for quick scanning and minimal cognitive load.
Don'tAvoid using TopNav to filter page content — use Tabs or filter controls instead.
Don'tAvoid deeply nested navigation hierarchies — keep menus to one level of depth.

Anatomy

ElementDescription
Product icon and namerequiredIdentifies the product in the navigation bar.
Navigation itemsrequiredPrimary links for product-level destinations.
More menuOverflow menu for additional navigation items.
Flex areaFlexible region for search, primary action buttons, or other controls.

Import

ts
import {XDSTopNavMegaMenu} from '@xds/core/TopNav'

Props

PropTypeDescription
labelrequired
stringVisible label for the trigger button.
items
ReactNodeMenu items slot — typically XDSTopNavMegaMenuItem components, but accepts any ReactNode.
featured
ReactNodeFeatured content slot — rendered in the right panel on desktop, below items in the mobile drawer.
delay
number (default: 150)Delay in milliseconds before showing the menu on hover.
hideDelay
number (default: 250)Delay in milliseconds before hiding the menu after the mouse leaves.
onOpenChange
(isOpen: boolean) => voidCallback fired when the mega menu opens or closes. Useful for coordinating wrapper styles.

Showcase source

tsx
'use client';
​
import {
  XDSTopNav,
  XDSTopNavHeading,
  XDSTopNavItem,
  XDSTopNavMegaMenu,
  XDSTopNavMegaMenuItem,
  XDSTopNavMegaMenuFeaturedCard,
} from '@xds/core/TopNav';
​
function RocketIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M15.59 14.37a6 6 0 0 1-5.84 7.38v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.926 14.926 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.58-5.84a14.927 14.927 0 0 0-2.58 5.84m2.699 2.7c-.103.021-.207.041-.311.06a15.09 15.09 0 0 1-2.448-2.448 14.9 14.9 0 0 1 .06-.312m-2.24 2.39a4.493 4.493 0 0 0-1.757 4.306 4.493 4.493 0 0 0 4.306-1.758M16.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
    </svg>
  );
}
​
function BookIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
    </svg>
  );
}
​
function CodeIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" />
    </svg>
  );
}
​
function ShieldIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
    </svg>
  );
}
​
export default function TopNavMegaMenuShowcase() {
  return (
    <XDSTopNav
      label="Mega menu demo"
      heading={<XDSTopNavHeading heading="DevTools" />}
      startContent={
        <>
          <XDSTopNavItem label="Overview" href="#" isSelected />
          <XDSTopNavMegaMenu
            label="Products"
            items={
              <>
                <XDSTopNavMegaMenuItem
                  title="Deploy"
                  description="Ship to production in seconds"
                  icon={<RocketIcon />}
                  href="#deploy"
                />
                <XDSTopNavMegaMenuItem
                  title="Documentation"
                  description="Guides, references, and tutorials"
                  icon={<BookIcon />}
                  href="#docs"
                />
                <XDSTopNavMegaMenuItem
                  title="API"
                  description="Programmatic access to all features"
                  icon={<CodeIcon />}
                  href="#api"
                />
                <XDSTopNavMegaMenuItem
                  title="Security"
                  description="Enterprise-grade protection"
                  icon={<ShieldIcon />}
                  href="#security"
                />
              </>
            }
            featured={
              <XDSTopNavMegaMenuFeaturedCard
                title="What's New"
                description="Check out our latest features and improvements in the Q2 release."
                linkLabel="Read the changelog"
                linkHref="#changelog"
              />
            }
          />
        </>
      }
    />
  );
}