XDS — Design System

TopNavMegaMenuFeaturedCard@xds/core v0.0.13 · XDSTopNavMegaMenuFeaturedCard

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.