XDS — Design System

XDSSideNavHeading@xds/core · SideNav

Usage

A sidebar navigation component for organizing application pages with sections, nested items, and icons. Use SideNav as the primary navigation when an app has 5 or more destinations or requires hierarchical grouping.

Best practices

Guidance	Practices
Do	Use sections to group related navigation items and help users scan for their destination.
Do	Pair outline and filled icon variants so the selected state is visually distinct.
Don't	Include a SideNavHeading when a TopNav is already providing app identity — this duplicates branding.
Don't	Use for filtering content — use tabs or filter buttons instead.

Anatomy

Element		Description
Product icon and name		Branding area at the top of the nav.
Navigation items	required	Sections and groups of navigable links.
Collapse/expand toggle		Toggle to collapse or expand the side nav.

Import

ts
import {XDSSideNavHeading} from '@xds/core/SideNav'

Props

Prop	Type	Description
headingrequired	string	Product/app name.
icon	ReactNode	Product/app icon.
headingHref	string	Link for the heading.
superheading	string	Text above the heading.
superheadingHref	string	Link for the superheading.
subheading	string	Text below the heading.
subheadingHref	string	Link for the subheading.
menu	ReactNode	Menu content rendered inside a popover.
headerEndContent	ReactNode	Content rendered at the trailing edge of the heading row, between text and chevron. Useful for badges, status indicators, or compact action buttons. Hidden when collapsed.

Showcase source

tsx
'use client';
import {XDSSideNav, XDSSideNavHeading} from '@xds/core/SideNav';
import {XDSHStack} 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 SideNavHeadingShowcase() {
  return (
    <XDSHStack gap={6}>
      <XDSSideNav
        header={
          <XDSSideNavHeading
            heading="Analytics"
            icon={<AppIcon />}
            headingHref="/"
          />
        }>
        {null}
      </XDSSideNav>
      <XDSSideNav
        header={
          <XDSSideNavHeading
            heading="Analytics"
            icon={<AppIcon />}
            superheading="Acme Corp"
            subheading="Production"
            headingHref="/"
          />
        }>
        {null}
      </XDSSideNav>
    </XDSHStack>
  );
}