XDSSideNavCollapseButton@xds/core · SideNav
Preview coming soon

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

Props

PropTypeDescription
sideNavRef
RefObject<HTMLElement | null>Ref to the XDSSideNav element. Only needed when the button is rendered outside the sidenav.
label
stringCustom button label. When provided, renders as a text button with chevron. When omitted, renders icon-only.
children
ReactNodeCustom button content. Overrides the default chevron icon and label.

Showcase source

tsx
'use client';
​
import type {ComponentProps} from 'react';
import {
  XDSSideNav,
  XDSSideNavCollapseButton,
  XDSSideNavHeading,
  XDSSideNavItem,
  XDSSideNavSection,
} from '@xds/core/SideNav';
​
function HomeIcon(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 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
    </svg>
  );
}
​
function FolderIcon(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 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
    </svg>
  );
}
​
export default function SideNavCollapseButtonShowcase() {
  return (
    <XDSSideNav
      collapsible={{hasButton: false}}
      header={<XDSSideNavHeading heading="Workspace" />}
      footerIcons={<XDSSideNavCollapseButton />}
    >
      <XDSSideNavSection title="Main">
        <XDSSideNavItem label="Home" icon={HomeIcon} isSelected href="#" />
        <XDSSideNavItem label="Projects" icon={FolderIcon} href="#" />
      </XDSSideNavSection>
    </XDSSideNav>
  );
}