# Sidebar

## Documentation

For an example see the Sidebar at the side of this page.

## Usage

```svelte
<Sidebar>
	<div>
		<div>Home</div>
		<div>Settings</div>
		<div>Profile</div>
	</div>
</Sidebar>

<!-- to show mobile version add a popovertarget to a button -->
<Button class="block lg:hidden" popovertarget="mobile-menu">
	Menu
</Button>
```

## API Reference

### Sidebar
A responsive sidebar that shows as a fixed panel on desktop and a popover on mobile.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| mobileOnly | `boolean` | `false` | When true, only renders the mobile popover version (hidden on desktop). |
| mobileClasses | `string` | `-` | Additional CSS classes to apply to the mobile popover version. |
| children | `Snippet` | `-` | The sidebar content. (required) |
| class | `string` | `-` | Additional CSS classes to apply. |