XDS — Design System

XDSTopNavMegaMenuFeaturedCard@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

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.

Anatomy

Element		Description
Product icon and name	required	Identifies the product in the navigation bar.
Navigation items	required	Primary links for product-level destinations.
More menu		Overflow menu for additional navigation items.
Flex area		Flexible region for search, primary action buttons, or other controls.

Import

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

Props

Prop	Type	Description
titlerequired	string	Card title.
description	string	Description text below the title.
image	string	Optional image URL displayed above the body.
imageAlt	string	Alt text for the image.
linkLabel	string	CTA link text.
linkHref	string	CTA link URL.
children	ReactNode	Custom content rendered below the standard body.

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"
    />
  );
}