XDS — Design System

TopNavMegaMenuFeaturedCard@xds/core · XDSTopNavMegaMenuFeaturedCard v0.0.13

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.

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

Best practices

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

Showcase source

tsx
'use client';
import {XDSTopNavMegaMenuFeaturedCard} from '@xds/core/TopNav';
export default function TopNavMegaMenuFeaturedCardShowcase() {
  return (
    <XDSTopNavMegaMenuFeaturedCard
      title="Introducing v2.0"
      description="Our biggest release yet with new components, faster builds, and a refreshed design language."
      linkLabel="Explore the release"
      linkHref="#release"
    />
  );
}