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

GuidancePractices
DoUse sections to group related navigation items and help users scan for their destination.
DoPair outline and filled icon variants so the selected state is visually distinct.
Don'tInclude a SideNavHeading when a TopNav is already providing app identity — this duplicates branding.
Don'tUse for filtering content — use tabs or filter buttons instead.

Anatomy

ElementDescription
Product icon and nameBranding area at the top of the nav.
Navigation itemsrequiredSections and groups of navigable links.
Collapse/expand toggleToggle to collapse or expand the side nav.

Import

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

Props

PropTypeDescription
labelrequired
stringItem label.
as
XDSLinkComponentTypeCustom link component.
icon
XDSIconTypeIcon displayed in the outline (unselected) variant. See `npx xds docs icons` for valid semantic names.
selectedIcon
XDSIconTypeIcon displayed when the item is selected (filled variant). See `npx xds docs icons` for valid semantic names.
isSelected
boolean (default: false)Marks this item as the current page.
isDisabled
boolean (default: false)Disabled state.
href
stringNavigation URL.
onClick
(e: MouseEvent) => voidClick handler.
endContent
ReactNodeRight-side content such as badges or counts.
children
ReactNodeSub-items for nesting.
collapsible
boolean | { defaultIsCollapsed?: boolean, isCollapsed?: boolean, onCollapsedChange?: (isCollapsed: boolean) => void } (default: false)Enables collapse behavior for items with children. Pass true for uncontrolled (starts expanded), or an object for controlled mode.

Showcase source

tsx
'use client';
​
import type {ComponentProps} from 'react';
import {XDSSideNav, XDSSideNavItem} from '@xds/core/SideNav';
import {XDSBadge} from '@xds/core/Badge';
​
function InboxIcon(props: ComponentProps<'svg'>) {
  return (
    <svg fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h3.218a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
    </svg>
  );
}
​
function DocumentIcon(props: ComponentProps<'svg'>) {
  return (
    <svg fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
    </svg>
  );
}
​
function CogIcon(props: ComponentProps<'svg'>) {
  return (
    <svg fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
      <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.212-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z" />
      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
    </svg>
  );
}
​
export default function SideNavItemShowcase() {
  return (
    <XDSSideNav>
      <XDSSideNavItem
        label="Inbox"
        icon={InboxIcon}
        isSelected
        href="#"
        endContent={<XDSBadge label="12" />}
      />
      <XDSSideNavItem
        label="Documents"
        icon={DocumentIcon}
        href="#"
      />
      <XDSSideNavItem
        label="Settings"
        icon={CogIcon}
        href="#"
        isDisabled
      />
    </XDSSideNav>
  );
}