SideNav

Vertical side navigation panel with optional collapsing support. Adapts to AppShell render modes (inline, drawer, topbar).

Examples

Basic

SilverWorkspace

Main

Home

Settings

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

Collapsible

SilverWorkspace

Main

Home

Inbox

Settings

Collapse sidebar

<div style={{height: 420}}>
  <SideNav
    collapseBreakpoint="none"
    header={
      <SideNavHeading heading="Silver" logo={logo} subheading="Workspace" />
    }
    isCollapsible>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

Responsive Initial Collapse

SilverWorkspace

Main

Home

Inbox

Settings

Collapse sidebar

<div style={{height: 420}}>
  <SideNav
    header={
      <SideNavHeading heading="Silver" logo={logo} subheading="Workspace" />
    }
    isCollapsible>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

Collapsible With Footer

SilverWorkspace

Main

Home

Inbox

Settings

AL

Collapse sidebar

Messages

Notifications

<div style={{height: 420}}>
  <SideNav
    collapseBreakpoint="none"
    footer={{
      actions: (
        <>
          <Button
            icon={MessageSquare}
            isIconOnly
            label="Messages"
            size="sm"
            variant="ghost"
          />
          <Button
            icon={Bell}
            isIconOnly
            label="Notifications"
            size="sm"
            variant="ghost"
          />
        </>
      ),
      content: <Avatar name="Ada Lovelace" size="small" />,
    }}
    header={
      <SideNavHeading heading="Silver" logo={logo} subheading="Workspace" />
    }
    isCollapsible>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

With Footer

SilverWorkspace

Main

Home

Inbox

AL

Notifications

Help

<div style={{height: 420}}>
  <SideNav
    footer={{
      actions: (
        <>
          <Button
            icon={Bell}
            isIconOnly
            label="Notifications"
            size="sm"
            variant="ghost"
          />
          <Button
            icon={HelpCircle}
            isIconOnly
            label="Help"
            size="sm"
            variant="ghost"
          />
        </>
      ),
      content: <Avatar name="Ada Lovelace" size="small" />,
    }}
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
    </SideNavSection>
  </SideNav>
</div>

Footer Only

Silver

Main

Home

Inbox

AL

<div style={{height: 420}}>
  <SideNav
    footer={{
      content: <Avatar name="Ada Lovelace" size="small" />,
    }}
    header={<SideNavHeading heading="Silver" logo={logo} />}>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
    </SideNavSection>
  </SideNav>
</div>

With Top Content

SilverWorkspace

Search

Main

Home

Inbox

Settings

function WithTopContent() {
  const [search, setSearch] = useState('');

  return (
    <div style={{height: 420}}>
      <SideNav
        header={<SideNavHeading heading="Silver" subheading="Workspace" />}
        topContent={
          <TextInput
            isLabelHidden
            label="Search"
            onChange={setSearch}
            placeholder="Search..."
            size="sm"
            value={search}
          />
        }>
        <SideNavSection title="Main">
          <SideNavItem href="/" icon={Home} isSelected label="Home" />
          <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
          <SideNavItem href="/settings" icon={Settings} label="Settings" />
        </SideNavSection>
      </SideNav>
    </div>
  );
}

With Bottom Content

SilverWorkspace

Main

Home

Inbox

Settings

Support

Help center

<div style={{height: 420}}>
  <SideNav
    bottomContent={
      <SideNavSection isHeaderHidden title="Support">
        <SideNavItem href="/help" icon={HelpCircle} label="Help center" />
      </SideNavSection>
    }
    header={
      <SideNavHeading heading="Silver" logo={logo} subheading="Workspace" />
    }>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

Disabled Items

SilverWorkspace

Main

Home

Inbox

Settings

Archive

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
      <SideNavItem
        href="/settings"
        icon={Settings}
        isDisabled
        label="Settings"
      />
      <SideNavItem icon={Archive} isDisabled label="Archive" />
    </SideNavSection>
  </SideNav>
</div>

With End Content

SilverWorkspace

Projects

Inbox3

Starred12

Trash

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection endContent={<Plus size={14} />} title="Projects">
      <SideNavItem
        endContent={<Badge label="3" />}
        href="/inbox"
        icon={Inbox}
        isSelected
        label="Inbox"
      />
      <SideNavItem
        endContent={<Badge label="12" />}
        href="/starred"
        icon={Star}
        label="Starred"
      />
      <SideNavItem href="/trash" icon={Trash} label="Trash" />
    </SideNavSection>
  </SideNav>
</div>

Button Items

SilverWorkspace

Actions

Home

Search

Settings

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection title="Actions">
      <SideNavItem icon={Home} isSelected label="Home" onClick={() => {}} />
      <SideNavItem icon={Search} label="Search" onClick={() => {}} />
      <SideNavItem icon={Settings} label="Settings" onClick={() => {}} />
    </SideNavSection>
  </SideNav>
</div>

Multiple Sections

SilverWorkspace

Primary

Home

Inbox

DocumentsPersonal files

All files

Folders

Starred

Team

Members

Settings

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection isHeaderHidden title="Primary">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
    </SideNavSection>
    <SideNavSection subtitle="Personal files" title="Documents">
      <SideNavItem href="/files" icon={File} label="All files" />
      <SideNavItem href="/folders" icon={Folder} label="Folders" />
      <SideNavItem href="/starred" icon={Star} label="Starred" />
    </SideNavSection>
    <SideNavSection title="Team">
      <SideNavItem href="/members" icon={Users} label="Members" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

With Logo

Acme CorpSilverDesign System

Main

Home

Settings

<div style={{height: 420}}>
  <SideNav
    header={
      <SideNavHeading
        headerEndContent={<ChevronDown size={16} />}
        heading="Silver"
        headingHref="/"
        logo={logo}
        subheading="Design System"
        superheading="Acme Corp"
      />
    }>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/settings" icon={Settings} label="Settings" />
    </SideNavSection>
  </SideNav>
</div>

Collapsible Items

SilverWorkspace

Main

Home

Inbox

Settings

General

Security

Notifications

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem href="/inbox" icon={Inbox} label="Inbox" />
      <SideNavItem icon={Settings} isCollapsible label="Settings">
        <SideNavItem href="/general" label="General" />
        <SideNavItem href="/security" label="Security" />
        <SideNavItem href="/notifications" label="Notifications" />
      </SideNavItem>
    </SideNavSection>
  </SideNav>
</div>

Collapsible With Links

SilverWorkspace

Main

Home

Settings

General

Security

Team

Members

Roles

<div style={{height: 420}}>
  <SideNav
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <SideNavSection title="Main">
      <SideNavItem href="/" icon={Home} isSelected label="Home" />
      <SideNavItem
        href="/settings"
        icon={Settings}
        isCollapsible
        label="Settings">
        <SideNavItem href="/general" label="General" />
        <SideNavItem href="/security" label="Security" />
      </SideNavItem>
      <SideNavItem href="/team" icon={Users} isCollapsible label="Team">
        <SideNavItem href="/members" label="Members" />
        <SideNavItem href="/roles" label="Roles" />
      </SideNavItem>
    </SideNavSection>
  </SideNav>
</div>

Scrollable

SilverWorkspace

Pages

Page 1

Page 2

Page 3

Page 4

Page 5

Page 6

Page 7

Page 8

Page 9

Page 10

Page 11

Page 12

Page 13

Page 14

Page 15

Page 16

Page 17

Page 18

Page 19

Page 20

Settings

Collapse sidebar

<div style={{height: 420}}>
  <SideNav
    collapseBreakpoint="none"
    footer={{
      content: <SideNavItem icon={Settings} label="Settings" />,
    }}
    header={
      <SideNavHeading heading="Silver" logo={logo} subheading="Workspace" />
    }
    isCollapsible>
    <SideNavSection title="Pages">
      {Array.from({length: 20}, (_, i) => (
        <SideNavItem
          href={`/page-${i + 1}`}
          icon={File}
          isSelected={i === 0}
          key={i}
          label={`Page ${i + 1}`}
        />
      ))}
    </SideNavSection>
  </SideNav>
</div>

With Actions

Projects

Edit projects

Active projects

Inbox

Inbox actions

Archived projects

Edit archived projects

Choose a navigation target or action

Collapse sidebar

function WithActions() {
  const [activity, setActivity] = useState(
    'Choose a navigation target or action',
  );
  return (
    <div style={{height: 420}}>
      <SideNav
        bottomContent={
          <p aria-label="Last action" role="status">
            {activity}
          </p>
        }
        collapseBreakpoint="none"
        isCollapsible>
        <SideNavItem
          actions={
            <Button
              icon={Edit}
              isIconOnly
              label="Edit projects"
              onClick={() => setActivity('Edit projects')}
              size="sm"
              variant="ghost"
            />
          }
          href="#projects"
          icon={Folder}
          isCollapsible
          label="Projects"
          onClick={event => {
            event.preventDefault();
            setActivity('Navigate to projects');
          }}>
          <SideNavItem
            label="Active projects"
            onClick={() => setActivity('Active projects')}
          />
        </SideNavItem>
        <SideNavItem
          actions={
            <DropdownMenu
              button={{
                icon: MoreVertical,
                isIconOnly: true,
                label: 'Inbox actions',
                size: 'sm',
                variant: 'ghost',
              }}
              items={[
                {
                  icon: Archive,
                  label: 'Archive inbox',
                  onClick: () => setActivity('Archive inbox'),
                },
              ]}
            />
          }
          icon={Inbox}
          label="Inbox"
          onClick={() => setActivity('Open inbox')}
        />
        <SideNavItem
          actions={
            <Button
              icon={Edit}
              isIconOnly
              label="Edit archived projects"
              onClick={() => setActivity('Edit archived projects')}
              size="sm"
              variant="ghost"
            />
          }
          icon={Archive}
          isDisabled
          label="Archived projects"
        />
      </SideNav>
    </div>
  );
}

API

SideNav

Vertical side navigation panel with optional collapsing support. Adapts to AppShell render modes (inline, drawer, topbar).

Prop	Type	Default	Description
bottomContent	ReactNode	—	Content rendered at the bottom of the scrollable area.
children*	ReactNode	—	Navigation item children rendered in the scrollable area.
className	string	—	Additional CSS class names applied to the nav element.
collapseBreakpoint	"sm" | "md" | "lg" | "none"	'lg'	Breakpoint at or below which a collapsible nav starts collapsed. This is evaluated only when the nav first mounts. Use none to always start expanded.
data-testid	string	—	Test ID applied to the nav element.
footer	SideNavFooter	—	Content and actions rendered in the sticky bottom section.
header	ReactNode	—	Content rendered at the top of the nav (e.g. a logo or title).
isCollapsible	boolean	false	Whether the nav can be collapsed to an icon-only toolbar.
ref	Ref<HTMLElement>	—	Ref forwarded to the nav element.
style	CSSProperties	—	Inline styles applied to the nav element.
topContent	ReactNode	—	Non-scrollable content rendered below the header.

SideNavHeading

Prop	Type	Default	Description
as	LinkComponent	—
className	string	—
data-testid	string	—
headerEndContent	ReactNode	—
heading	string	—
headingHref	string	—
href	string	—
logo	ReactNode	—
ref	Ref<HTMLElement>	—
style	CSSProperties	—
subheading	string	—
superheading	string	—

SideNavItem

A single navigation item inside a SideNav. Renders as a link when `href` is provided, or a button otherwise. Supports nested sub-items via `children` with optional expand/collapse behavior.

Prop	Type	Default	Description
actions	ReactNode	—	Independent controls beside the primary target and expand/collapse toggle. Tab order is primary target, toggle (if separate), actions, then children. Hidden in the collapsed rail. Each action owns its disabled state. Use compact controls (for example, Button size="sm") to match row sizing.
as	LinkComponent	—	Custom link component used when href is set.
children	ReactNode	—	Nested sub-items rendered below this item.
className	string	—	Additional CSS class names applied to the item.
data-testid	string	—	Test ID applied to the item.
endContent	ReactNode	—	Content rendered at the end of the item (e.g. a badge).
href	string	—	Link destination. When set, the item renders as a link.
icon	IconComponent	—	Icon rendered before the label.
isCollapsible	boolean	false	Whether the item can expand/collapse its children.
isDefaultExpanded	boolean	true	Whether the item's children are initially expanded.
isDisabled	boolean	false	Whether the item is disabled.
isSelected	boolean	false	Whether the item is currently selected.
label*	string	—	Accessible item label, also used as visible text.
onClick	MouseEventHandler<HTMLElement>	—	Click handler for the item.
ref	Ref<HTMLElement>	—	Ref forwarded to the root element.
style	CSSProperties	—	Inline styles applied to the item.

SideNavSection

Prop	Type	Default	Description
children*	ReactNode	—
className	string	—
data-testid	string	—
endContent	ReactNode	—
isHeaderHidden	boolean	—
ref	Ref<HTMLDivElement>	—
style	CSSProperties	—
subtitle	string	—
title*	string	—