Sidebar

iPadOS-style navigation: a sticky column (collapsible to an icon rail) from a breakpoint up, a drawer below it. Groups take an icon and fold away; SidebarSearch filters the rows as you type.

import { Sidebar, SidebarHeader, SidebarSearch, SidebarContent, SidebarGroup, SidebarItem, SidebarFooter } from "pleate/sidebar";

Search, folding groups, icon rail, drawer

Icon railTinted selection

ExploreType in Search to filter. Below lg this is a drawer.

Settings in cards

Groups as cards with a colored tile per row, as in iPadOS Settings.

Wi-FiRows in cards, filled selection, a tile per row

Props

open / onOpenChange

Drawer state below the breakpoint.

boolean

collapsed

Icon rail on desktop; the filter is off while collapsed.

boolean

breakpoint

Column from here up.

"md" | "lg"default "lg"

variant / selection

Background and selected-row style.

"plain" | "surface" / "soft" | "filled"default "plain" / "filled"

sticky / top

Sticky column and its offset.

boolean / string

query / onQueryChange

Control the filter text yourself (optional).

string

SidebarSearch

Filter field. Down arrow moves into the results, Enter opens the first, Escape clears.

placeholder, label, shortcut

SidebarGroup

A titled group of rows. Folding animates; filterable={false} hides it while filtering.

label, icon, collapsible, defaultOpen, open, variant, textValue, filterable

SidebarItem

One row; closes the drawer on press. textValue is what the filter matches when children are not text.

icon, active, badge, asChild, textValue

SidebarContent emptyLabel

Shown when the filter leaves nothing.

ReactNode

Accessibility

Drawer is a modal dialog: focus trap, Escape, scroll lock.
Rail rows keep their label for screen readers and as a tooltip.
Fold buttons expose aria-expanded; a folded list is inert, so it leaves the tab order.
The filter announces the number of results in a status region.