# Sidebar

A bounded workspace sidebar with grouped destinations, a compact rail and nested navigation flyouts.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, Sidebar } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <div style={{height:"32rem"}}><Sidebar label="Workspace navigation" groups={[{id:"workspace",label:"Workspace",items:[{value:"overview",label:"Overview",href:"#overview"},{value:"projects",label:"Projects",children:[{value:"design",label:"Design system",href:"#design"}]}]}]} currentValue="overview" /></div>
    </FloodRoot>
  );
}
```

## Design notes

- Composes NavigationTree, ScrollArea, IconButton, Stack and Text. Host controls height; header/footer remain fixed while the navigation body scrolls with reserved scrollbar clearance.
- collapsed/defaultCollapsed/onCollapsedChange control the full-width versus compact rail. Controlled refusals preserve accepted geometry. side supports logical start/end; width affects expanded mode only. collapsible=false omits the toggle.
- groups need unique IDs and globally unique item values. Destinations retain real links; expansion and currentValue are independent. Disabled items cannot navigate or open a branch.
- expandedValues/defaultExpandedValues/onExpandedValuesChange retain branch disclosure across width changes. In compact mode a top-level branch opens a Popover with full navigation; choosing a destination closes that flyout. No route is inferred or persisted.
- header/footer accept content or a ({collapsed}) render function. Adapt meaningful content using that state, rather than hiding arbitrary descendants with CSS. The host owns workspace/account menus and their actions.
- The inline headerLayout puts the expanded identity and toggle on one row. The stacked default keeps the toggle in its original place across states. Enable branchGuides per group for dense nesting.
- Item icons use IconSlot; trailing content can compose Badge or other meaningful metadata in expanded mode. Compact destinations retain accessible names and native title labels; missing icons have a neutral fallback glyph.
- No automatic mobile drawer, routing, resizing, keyboard shortcut or preference storage is added. Check the bounded host, enlarged text, RTL, final scroll item, real destinations and focus across collapse/flyout transitions.
- groups can hide a redundant visual label with hideLabel while preserving the navigation name. currentKind="location" marks a global module; page is the default contextual destination. The workspace playground composes Sidebar profiles into GlobalRail plus ContextBar without duplicate flyouts.
- variant defaults to quiet in the 0.2.11 candidate: muted inactive content, normal control weight and restrained rectangular selection through existing semantic roles. standard retains the stronger pill recipe. Both compose the same primitive anatomy and behavior; inspect them in the full-width navigation workspace.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `label` | `string` | `Required` |
| `groups` | `readonly SidebarGroup[]` | `Required` |
| `currentValue` | `string` | `—` |
| `currentKind` | `NavigationTreeProps["currentKind"]` | `—` |
| `collapsed` | `boolean` | `—` |
| `defaultCollapsed` | `boolean` | `—` |
| `onCollapsedChange` | `(collapsed:boolean)=>void` | `—` |
| `collapsible` | `boolean` | `—` |
| `collapseLabel` | `string` | `—` |
| `expandLabel` | `string` | `—` |
| `expandedValues` | `readonly string[]` | `—` |
| `defaultExpandedValues` | `readonly string[]` | `—` |
| `onExpandedValuesChange` | `(values:string[])=>void` | `—` |
| `expandItemLabel` | `NavigationTreeProps["expandLabel"]` | `—` |
| `size` | `"sm" \| "md" \| "lg"` | `—` |
| `variant` | `"quiet" \| "standard"` | `—` |
| `side` | `"start" \| "end"` | `—` |
| `width` | `CSSProperties["width"]` | `—` |
| `header` | `ReactNode \| (state:SidebarSlotState)=>ReactNode` | `—` |
| `headerLayout` | `"stacked" \| "inline"` | `—` |
| `footer` | `ReactNode \| (state:SidebarSlotState)=>ReactNode` | `—` |
| `footerSeparator` | `boolean` | `—` |
| `headerSeparator` | `boolean` | `—` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "onChange">` | `Forwarded` |