SidebarLayout

Import

import { SidebarLayout } from 'tuimorphic';

Basic Usage

Main Content

This is the main content area of the sidebar layout.

<SidebarLayout sidebar={<nav>Navigation</nav>}>
  <main>Main content</main>
</SidebarLayout>

Props

Prop	Type	Default	Description
`sidebar`*	`React.ReactNode`	—	Content to render in the sidebar panel
`children`*	`React.ReactNode`	—	Main content area
`defaultSidebarWidth`	`number`	`200`	Default sidebar width in pixels
`minSidebarWidth`	`number`	`100`	Minimum sidebar width in pixels
`maxSidebarWidth`	`number`	`500`	Maximum sidebar width in pixels
`showHandle`	`boolean`	`false`	Whether to show the resize handle
`collapsible`	`boolean`	`false`	Whether the sidebar can be collapsed
`defaultCollapsed`	`boolean`	`false`	Whether the sidebar starts collapsed
`side`	`'left' \| 'right'`	`'left'`	Which side the sidebar appears on
`className`	`string`	—	Additional CSS class names

Variants

Add a drag handle to allow users to resize the sidebar:

Resizable Sidebar

Drag the handle to resize the sidebar.

<SidebarLayout
  sidebar={<nav>Menu</nav>}
  defaultSidebarWidth={180}
  minSidebarWidth={120}
  maxSidebarWidth={300}
  showHandle
>
  <main>Main content</main>
</SidebarLayout>

Allow users to collapse and expand the sidebar:

Collapsible Sidebar

Click the button to collapse/expand.

<SidebarLayout
  sidebar={<nav>Files</nav>}
  collapsible
>
  <main>Main content</main>
</SidebarLayout>

Position the sidebar on the right side:

Right Sidebar

The sidebar can appear on either side.

<SidebarLayout
  sidebar={<aside>Details</aside>}
  side="right"
  collapsible
  defaultSidebarWidth={150}
>
  <main>Main content</main>
</SidebarLayout>

Full-Featured Layout

Combine resizing and collapsing capabilities:

Full-Featured Layout

Combines resizable handle and collapsible button.

Drag the handle or click [<] to interact.

<SidebarLayout
  sidebar={<nav>Navigation Menu</nav>}
  defaultSidebarWidth={160}
  minSidebarWidth={120}
  maxSidebarWidth={250}
  showHandle
  collapsible
>
  <main>Application Content</main>
</SidebarLayout>

Accessibility

Resize handle has proper ARIA attributes (role="separator", aria-orientation, aria-valuenow)
Keyboard support for resizing (Arrow keys)
Collapse button has aria-label and aria-expanded attributes
Collapsed sidebar has aria-hidden attribute

Styling

SidebarLayout uses CSS custom properties for theming:

Variable	Description
`--theme-border`	Divider and handle border color
`--theme-background`	Sidebar background color
`--theme-foreground`	Text and icon color

Main Content

Resizable Sidebar

Collapsible Sidebar

Right Sidebar

Full-Featured Layout

On this page