Skip to content
silver-uisilver-ui

SideNav

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

Examples

Section titled “Examples”

Basic

Section titled “Basic”
<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

Section titled “Collapsible”
<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

Section titled “Responsive Initial Collapse”
<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>
Section titled “Collapsible With Footer”
<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>
Section titled “With Footer”
<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>
Section titled “Footer Only”
<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

Section titled “With Top Content”
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>
  );
}

Disabled Items

Section titled “Disabled Items”
<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

Section titled “With End Content”
<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

Section titled “Button Items”
<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

Section titled “Multiple Sections”
<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>
Section titled “With Logo”
<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

Section titled “Collapsible Items”
<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>
Section titled “Collapsible With Links”
<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

Section titled “Scrollable”
<div style={{height: 420}}>
  <SideNav
    footer={{
      content: <SideNavItem icon={Settings} label="Settings" />,
    }}
    header={<SideNavHeading heading="Silver" subheading="Workspace" />}>
    <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>

API

Section titled “API”

SideNav

Section titled “SideNav”

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

PropTypeDefaultDescription
children*ReactNode—Navigation item children rendered in the scrollable area.
classNamestring—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-testidstring—Test ID applied to the nav element.
footerSideNavFooter—Content and actions rendered in the sticky bottom section.
headerReactNode—Content rendered at the top of the nav (e.g. a logo or title).
isCollapsiblebooleanfalseWhether the nav can be collapsed to an icon-only toolbar.
refRef<HTMLElement>—Ref forwarded to the nav element.
styleCSSProperties—Inline styles applied to the nav element.
topContentReactNode—Non-scrollable content rendered below the header.

SideNavHeading

Section titled “SideNavHeading”
PropTypeDefaultDescription
asLinkComponent—
classNamestring—
data-testidstring—
headerEndContentReactNode—
headingstring—
headingHrefstring—
hrefstring—
logoReactNode—
refRef<HTMLElement>—
styleCSSProperties—
subheadingstring—
superheadingstring—

SideNavItem

Section titled “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.

PropTypeDefaultDescription
asLinkComponent—Custom link component used when href is set.
childrenReactNode—Nested sub-items rendered below this item.
classNamestring—Additional CSS class names applied to the item.
data-testidstring—Test ID applied to the item.
endContentReactNode—Content rendered at the end of the item (e.g. a badge).
hrefstring—Link destination. When set, the item renders as a link.
iconIconComponent—Icon rendered before the label.
isCollapsiblebooleanfalseWhether the item can expand/collapse its children.
isDefaultExpandedbooleantrueWhether the item's children are initially expanded.
isDisabledbooleanfalseWhether the item is disabled.
isSelectedbooleanfalseWhether the item is currently selected.
label*string—Accessible item label, also used as visible text.
onClickMouseEventHandler<HTMLElement>—Click handler for the item.
refRef<HTMLElement>—Ref forwarded to the root element.
styleCSSProperties—Inline styles applied to the item.

SideNavSection

Section titled “SideNavSection”
PropTypeDefaultDescription
children*ReactNode—
classNamestring—
data-testidstring—
endContentReactNode—
isHeaderHiddenboolean—
refRef<HTMLDivElement>—
styleCSSProperties—
subtitlestring—
title*string—