SideNav·component·@astryxdesign/core

Side Nav Collapse Button

Toggle button for sidenav collapse. Place inside SideNav (reads context automatically) or outside it (hand the same controlled collapsible config to both). Renders as an icon-only ghost button by default.

Open in Playground @astryxdesign/core/SideNav

Showcases and examples

2 documented examples

Side Nav Collapse Button

Demonstrates SideNavCollapseButton inside a collapsible SideNav.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · side-nav-collapse-button-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import type {ComponentProps} from 'react';
import {
  SideNav,
  SideNavCollapseButton,
  SideNavHeading,
  SideNavItem,
  SideNavSection,
} from '@astryxdesign/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 (
    <SideNav
      collapsible={{hasButton: false}}
      header={<SideNavHeading heading="Workspace" />}
      footerIcons={<SideNavCollapseButton />}>
      <SideNavSection title="Main">
        <SideNavItem label="Home" icon={HomeIcon} isSelected href="#" />
        <SideNavItem label="Projects" icon={FolderIcon} href="#" />
      </SideNavSection>
    </SideNav>
  );
}

Usage

Typed props

Prop	Type and behavior
`collapsible`	`{isCollapsed: boolean, onCollapsedChange: (isCollapsed: boolean) => void}` The same controlled collapsible config passed to SideNav. Only needed when the button is rendered outside the sidenav, where collapse context cannot reach it.
`handleRef`	`RefObject<SideNavImperativeCollapseHandle \| null>` Deprecated. Imperative collapse handle from SideNav; pass collapsible instead.
`label`	`string` Custom button label. When provided, renders as a text button with chevron. When omitted, renders icon-only.
`size`	`'sm' \| 'md' \| 'lg'` Button size. Defaults to the size its container cascades ('sm' inside a SideNav footer) and to 'md' with no container. Set it when the button sits outside a sized container and has to match its neighbours.
`children`	`ReactNode` Custom button content. Overrides the default chevron icon and label.