SideBar

Compound navigation: sections, folders, a create row, and a compact mode.

When to use

Use SideBar when you need compound navigation: sections, folders, a create row, and a compact mode.

Import

TypeScript

import { SideBar } from '@gzodo/ui'

SideBar is the app navigation, not a list of links in a page. Compose it from Header, Section, Item, Folder, Create, and Footer. compact hides labels and keeps the icons. Inside a resizable panel, pass compact from the layout or let the sidebar measure its own width.

Examples

Sections and items

Section groups rows. Title is the group label. active on an item is the current page. Clicking a row is onClick.

Folder

Folder nests items under a row that toggles. defaultOpen starts it expanded. open and onOpenChange make it controlled.

Collapsible section

collapsible turns the title into a toggle. The body animates closed. Compact mode ignores the collapse and shows icons only.

Create and footer

Create is the quiet add row at the end of the list. Footer stays pinned to the bottom of the sidebar.

Compact

compact hides labels, titles, and the create text. Icons stay centered. Use it for a collapsed app rail.

SideBar

Property

Description

Type

Default

children

Header, sections, create, and footer.

ReactNode

—

compact

Force icon-only mode. When omitted, the sidebar measures its width.

boolean

—

compactBreakpoint

Width at which measuring switches to compact. Defaults to the snap width.

number

—

className

Class on the root.

string

—

SideBar.Item

Property

Description

Type

Default

children

Label. Hidden in compact mode.

ReactNode

—

active

Current destination. Filled surface and border.

boolean

—

icon

Leading icon, in an 18px slot.

ReactNode

—

title

Native tooltip and accessible name. Important in compact mode.

string

—

onClick

Activate the row.

() => void

—

actions

Trailing actions, shown on hover.

ReactNode

—

actionsVisible

Keep the actions visible without hover.

boolean

—

SideBar.Folder

Property

Description

Type

Default

title

Folder label.

ReactNode

—

icon

Icon when closed.

ReactNode

—

openIcon

Icon when open. Falls back to icon.

ReactNode

—

defaultOpen

Uncontrolled initial open state.

boolean

—

open

Controlled open state.

boolean

—

onOpenChange

Called when the folder toggles.

(open: boolean) => void

—

children

Nested items.

ReactNode

—

SideBar.Create

Property

Description

Type

Default

children

Label. Hidden in compact mode.

ReactNode

—

icon

Leading icon.

ReactNode

—

onClick

Start the create action.

() => void

—

title

Accessible name.

string

—

Avatar

Changelog