XDSTopNavMegaMenuItem@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 {XDSTopNavMegaMenuItem} from '@xds/core/TopNav'

Props

PropTypeDescription
titlerequired
stringDisplay title for the menu item.
description
stringOptional description text displayed below the title.
icon
ReactNodeOptional icon element displayed to the left.
href
stringURL to navigate to when clicked.
onClick
() => voidCallback when item is clicked.
as
XDSLinkComponentTypeCustom component to render instead of <a> for link items. Overrides the provider-level default set by XDSLinkProvider.

Showcase source

tsx
'use client';
​
import {XDSTopNavMegaMenuItem} from '@xds/core/TopNav';
import {XDSGrid} from '@xds/core/Grid';
​
function BoltIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
    </svg>
  );
}
​
function CubeIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
    </svg>
  );
}
​
function GlobeIcon() {
  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 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 0 1 7.843 4.582M12 3a8.997 8.997 0 0 0-7.843 4.582m15.686 0A11.953 11.953 0 0 1 12 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0 1 21 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0 1 12 16.5a17.92 17.92 0 0 1-8.716-2.247m0 0A8.966 8.966 0 0 1 3 12c0-1.264.26-2.466.732-3.558" />
    </svg>
  );
}
​
function WrenchIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path strokeLinecap="round" strokeLinejoin="round" d="M11.42 15.17 17.25 21A2.652 2.652 0 0 0 21 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 1 1-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 0 0 4.486-6.336l-3.276 3.277a3.004 3.004 0 0 1-2.25-2.25l3.276-3.276a4.5 4.5 0 0 0-6.336 4.486c.049.58.025 1.192-.14 1.743" />
    </svg>
  );
}
​
export default function TopNavMegaMenuItemShowcase() {
  return (
    <XDSGrid columns={2} gap={2}>
      <XDSTopNavMegaMenuItem
        title="Edge Functions"
        description="Run serverless code at the network edge"
        icon={<BoltIcon />}
        href="#edge"
      />
      <XDSTopNavMegaMenuItem
        title="Storage"
        description="Object and file storage for your application"
        icon={<CubeIcon />}
        href="#storage"
      />
      <XDSTopNavMegaMenuItem
        title="CDN"
        description="Global content delivery with instant purging"
        icon={<GlobeIcon />}
        href="#cdn"
      />
      <XDSTopNavMegaMenuItem
        title="Build Tools"
        description="Optimized bundling and compilation pipeline"
        icon={<WrenchIcon />}
        href="#build"
      />
    </XDSGrid>
  );
}