XDS — Design System

XDSTopNavHeading@xds/core · TopNav

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

Props

Prop	Type	Description
heading	string	Heading text to display.
logo	ReactNode	Logo element to display before the heading text. Can be an image, XDSNavIcon, or any ReactNode.
href	string	URL to navigate to when clicked. When provided, renders as an anchor element.

Showcase source

tsx
'use client';
import {XDSTopNav, XDSTopNavHeading} from '@xds/core/TopNav';
import {XDSVStack} from '@xds/core/Layout';
function AppIcon() {
  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 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
    </svg>
  );
}
export default function TopNavHeadingShowcase() {
  return (
    <XDSVStack gap={4}>
      <XDSTopNav
        label="Plain heading example"
        heading={
          <XDSTopNavHeading
            heading="Acme Platform"
            logo={<AppIcon />}
          />
        }
      />
      <XDSTopNav
        label="Linked heading example"
        heading={
          <XDSTopNavHeading
            heading="Acme Platform"
            logo={<AppIcon />}
            href="/"
          />
        }
      />
    </XDSVStack>
  );
}