# Sidebar

Sidebar renders the sidebar part of the sidebar composition.

## Public import

```svelte
<script lang="ts">
  import { Sidebar } from "rom-ui/primitives/sidebar";
  import "rom-studio/styles";
</script>
```

## Composition and responsibility

Use this part with exports from the same primitive family. Interactive roots own shared interaction state. Content parts render the corresponding region.

Public names: `Root`, `Sidebar`.

## Declared props

This declaration comes from the installed package. Imported types retain their upstream meaning.

```ts
type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
		side?: "left" | "right";
		variant?: "sidebar" | "floating" | "inset";
		collapsible?: "offcanvas" | "icon" | "none";
		onMobileCloseAutoFocus?: ComponentProps<typeof Sheet.Content>["onCloseAutoFocus"];
	};
```

## Source and version

ROM UI **0.1.0-alpha.7**. [Component source](https://github.com/pmikstacki/rom-ui/blob/v0.1.0-alpha.7/src/lib/components/ui/sidebar/sidebar.svelte).

See [the composition guide](/docs/studio-compositions/) for host integration boundaries.