LogoPuzzle
Skip to Content
Puzzle
UI ComponentsLayout

Sidebar

A semantic supporting-content region.

Import

import { Sidebar } from "@puzzle-ui/ui";

Usage

Sidebar supplies a styled region, not navigation state or page positioning. Compose it with PageLayout when building a full page.

390 × 350

API

PropTypeDefaultDescription
asElementType"aside"Semantic element override.
childrenReactNode-Supporting content.

Native attributes, styles, classes, and refs for the chosen element are forwarded. Name multiple complementary landmarks distinctly. Use CollapsableSidebar for expandable icon navigation.

Separator

Visually divide content into distinct sections with horizontal or vertical separators.

Stack

Arrange elements with token-based spacing and responsive direction.

On this page

ImportUsageAPI
;