Source: https://app-studio-6167b.web.app/docs/Sidebar

@app-studio/components

# Sidebar

A versatile layout component for navigation or content, typically positioned at the screen edges.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar.tsx)

## Import

```ts
import { Sidebar } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React, { useState } from 'react';
import { Sidebar } from '@app-studio/components';
import { Button } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function SidebarExample() {
  const [page, setPage] = useState('Overview');
  return (
    <Vertical height={280} width="100%" maxWidth={340} overflow="hidden">
      <Sidebar fixed={false} defaultExpanded>
        <Sidebar.Header>
          <Text fontWeight="bold">Workspace</Text>
        </Sidebar.Header>
        <Sidebar.Content>
          {['Overview', 'Projects', 'Settings'].map((item) => (
            <Button
              key={item}
              variant={page === item ? 'subtle' : 'ghost'}
              onClick={() => setPage(item)}
            >
              {item}
            </Button>
          ))}
        </Sidebar.Content>
        <Sidebar.Footer>
          <Text role="status">Current page: {page}</Text>
        </Sidebar.Footer>
      </Sidebar>
    </Vertical>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Sidebar**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L15) |
| `position` | `Position` `"left"``"right"` | `—` | Position of the element or notification.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L17) |
| `size` | `Size` `"sm"``"md"``"lg"``"xl"` | `—` | Size preset for the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L19) |
| `variant` | `Variant` `"outline"``"default"``"elevated"``"subtle"``"filled"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L21) |
| `defaultExpanded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L23) |
| `expanded` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L25) |
| `onExpandedChange` | `((expanded: boolean) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L27) |
| `fixed` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L29) |
| `hasBackdrop` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L31) |
| `showToggleButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L33) |
| `expandedWidth` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L35) |
| `collapsedWidth` | `string \| number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L37) |
| `breakpoint` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L39) |
| `breakpointBehavior` | `BreakpointBehavior` `"overlay"``"collapse"``"hide"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L41) |
| `elevation` | `Elevation` `"medium"``"none"``"low"``"high"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L43) |
| `transitionPreset` | `TransitionPreset` `"slow"``"fast"``"normal"``"bounce"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L45) |
| `ariaLabel` | `string` | `—` | Accessible name for the control, especially when it has no visible label.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L47) |
| `views` | `SidebarStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L49) |

### Sidebar.Header

**Sidebar.Header**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L55) |
| `showToggleButton` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L57) |
| `views` | `{ header?: ViewProps; toggleButton?: ViewProps; toggleButtonIcon?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L59) |

### Sidebar.Content

**Sidebar.Content**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L72) |
| `views` | `{ content?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L74) |

### Sidebar.Footer

**Sidebar.Footer**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` Required | View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null` | `—` | Content rendered inside the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L83) |
| `views` | `{ footer?: ViewProps; }` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Sidebar/Sidebar/Sidebar.props.ts#L85) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.