CollapsibleSidebar#

CollapsibleSidebar()#

function CollapsibleSidebar(props): Element;

A sidebar docked to the left or right edge of its container.

Now a naming shim over CollapsibleEdge — see the note in CollapsiblePanel.tsx. Kept so existing call sites and their width/minWidth prop names keep working.

Parameters#

Parameter	Type
`props`	`CollapsibleSidebarProps`

Returns#

Element

CollapsibleSidebarProps#

Properties#

anchor?#

optional anchor?: "left" | "right";

Which side of the screen the sidebar appears on

children#

children: ReactNode;

Content to render inside the sidebar

handleIcon?#

optional handleIcon?: ReactNode;

Custom icon for the toggle handle (replaces default chevron)

handlePosition?#

optional handlePosition?: string;

Position of the toggle handle (CSS value, e.g., "50%", "100px", "calc(50% - 20px)")

headerActions?#

optional headerActions?: ReactNode;

Extra actions rendered in the header alongside the toggle button

headerContent?#

optional headerContent?: ReactNode;

Custom header content (replaces default title)

hideHandleWhenClosed?#

optional hideHandleWhenClosed?: boolean;

Hide the toggle handle when sidebar is closed (useful when using external toggle button)

hideHeader?#

optional hideHeader?: boolean;

Hide the header entirely

indicatorColor?#

optional indicatorColor?: string;

Color of the indicator

maxWidth?#

optional maxWidth?: number;

Maximum width when resizable

minWidth?#

optional minWidth?: number;

Minimum width when resizable

onResize?#

optional onResize?: (width) => void;

Callback when width changes (only when resizable)

Parameters#

Parameter	Type
`width`	`number`

Returns#

void

onToggle#

onToggle: (open) => void;

Callback when the sidebar should be toggled

Parameters#

Parameter	Type
`open`	`boolean`

Returns#

void

open#

open: boolean;

Whether the sidebar is open

resizable?#

optional resizable?: boolean;

Enable resizing

showIndicator?#

optional showIndicator?: boolean;

Show a pulsing indicator on the toggle button (e.g., for active state)

sx?#

optional sx?: any;

Additional sx props for the container

title?#

optional title?: string;

Title shown in the sidebar header

toggleLabel?#

optional toggleLabel?: string;

Accessible name for the toggle button.

toggleTooltip?#

optional toggleTooltip?: string;

Tooltip for the toggle button when closed

width?#

optional width?: number;

Width of the sidebar when open (initial width if resizable)

default#

Renames and re-exports CollapsibleSidebar