Sidebar

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

Usage

		<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.

Property Type Description

mobileOnly

boolean

When true, only renders the mobile popover version (hidden on desktop). Default: false

mobileClasses

string

Additional CSS classes to apply to the mobile popover version. Default: —

children required

Snippet

The sidebar content.

class

string

Additional CSS classes to apply. Default: —

Property

mobileOnly

mobileClasses

children

class