Sidebar

When you need to move from a horizontal nav to a sidebar, you know your app is all grown up.

<script>
	import { Avatar } from '$lib/components/avatar';
	import {
		Dropdown,
		DropdownButton,
		DropdownDivider,
		DropdownItem,
		DropdownLabel,
		DropdownMenu
	} from '$lib/components/dropdown';
	import {
		Sidebar,
		SidebarBody,
		SidebarFooter,
		SidebarHeader,
		SidebarItem,
		SidebarLabel,
		SidebarSection,
		SidebarSpacer
	} from '$lib/components/sidebar';

	import HeroiconsArrowRightStartOnRectangle16Solid from 'virtual:icons/heroicons/arrow-right-start-on-rectangle-16-solid';
	import HeroiconsChevronDown16Solid from 'virtual:icons/heroicons/chevron-down-16-solid';
	import HeroiconsChevronUp16Solid from 'virtual:icons/heroicons/chevron-up-16-solid';
	import HeroiconsCog8Tooth16Solid from 'virtual:icons/heroicons/cog8-tooth-16-solid';
	import HeroiconsLightBulb16Solid from 'virtual:icons/heroicons/light-bulb-16-solid';
	import HeroiconsPlus16Solid from 'virtual:icons/heroicons/plus-16-solid';
	import HeroiconsShieldCheck16Solid from 'virtual:icons/heroicons/shield-check-16-solid';
	import HeroiconsUser16Solid from 'virtual:icons/heroicons/user-16-solid';

	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons/cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons/home-20-solid';
	import HeroiconsInbox20Solid from 'virtual:icons/heroicons/inbox-20-solid';
	import HeroiconsMagnifyingGlass20Solid from 'virtual:icons/heroicons/magnifying-glass-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons/megaphone-20-solid';
	import HeroiconsQuestionMarkCircle20Solid from 'virtual:icons/heroicons/question-mark-circle-20-solid';
	import HeroiconsSparkles20Solid from 'virtual:icons/heroicons/sparkles-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons/square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons/ticket-20-solid';
</script>

<Sidebar>
	<SidebarHeader>
		<Dropdown>
			<DropdownButton as={SidebarItem} class="mb-2.5">
				<Avatar src="/tailwind-logo.svg" />
				<SidebarLabel>Tailwind Labs</SidebarLabel>
				<HeroiconsChevronDown16Solid />
			</DropdownButton>
			<DropdownMenu class="min-w-64" anchor="bottom start">
				<DropdownItem href="/teams/1/settings">
					<HeroiconsCog8Tooth16Solid />
					<DropdownLabel>Settings</DropdownLabel>
				</DropdownItem>
				<DropdownDivider />
				<DropdownItem href="/teams/1">
					<Avatar slot="icon" src="/tailwind-logo.svg" />
					<DropdownLabel>Tailwind Labs</DropdownLabel>
				</DropdownItem>
				<DropdownItem href="/teams/2">
					<Avatar slot="icon" initials="WC" class="bg-purple-500 text-white" />
					<DropdownLabel>Workcation</DropdownLabel>
				</DropdownItem>
				<DropdownDivider />
				<DropdownItem href="/teams/create">
					<HeroiconsPlus16Solid />
					<DropdownLabel>New team&hellip;</DropdownLabel>
				</DropdownItem>
			</DropdownMenu>
		</Dropdown>
		<SidebarSection>
			<SidebarItem href="/search">
				<HeroiconsMagnifyingGlass20Solid />
				<SidebarLabel>Search</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/inbox">
				<HeroiconsInbox20Solid />
				<SidebarLabel>Inbox</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarHeader>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/home">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
		<SidebarSpacer />
		<SidebarSection>
			<SidebarItem href="/support">
				<HeroiconsQuestionMarkCircle20Solid />
				<SidebarLabel>Support</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/changelog">
				<HeroiconsSparkles20Solid />
				<SidebarLabel>Changelog</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
	<SidebarFooter>
		<Dropdown>
			<DropdownButton as={SidebarItem}>
				<span class="flex min-w-0 items-center gap-3">
					<Avatar src="/profile-photo.jpg" class="size-10" square alt="" />
					<span class="min-w-0">
						<span class="block truncate text-sm/5 font-medium text-zinc-950 dark:text-white">
							Erica
						</span>
						<span class="block truncate text-xs/5 font-normal text-zinc-500 dark:text-zinc-400">
							erica@example.com
						</span>
					</span>
				</span>
				<HeroiconsChevronUp16Solid />
			</DropdownButton>
			<DropdownMenu class="min-w-64" anchor="top start">
				<DropdownItem href="/my-profile">
					<HeroiconsUser16Solid />
					<DropdownLabel>My profile</DropdownLabel>
				</DropdownItem>
				<DropdownItem href="/settings">
					<HeroiconsCog8Tooth16Solid />
					<DropdownLabel>Settings</DropdownLabel>
				</DropdownItem>
				<DropdownDivider />
				<DropdownItem href="/privacy-policy">
					<HeroiconsShieldCheck16Solid />
					<DropdownLabel>Privacy policy</DropdownLabel>
				</DropdownItem>
				<DropdownItem href="/share-feedback">
					<HeroiconsLightBulb16Solid />
					<DropdownLabel>Share feedback</DropdownLabel>
				</DropdownItem>
				<DropdownDivider />
				<DropdownItem href="/logout">
					<HeroiconsArrowRightStartOnRectangle16Solid />
					<DropdownLabel>Sign out</DropdownLabel>
				</DropdownItem>
			</DropdownMenu>
		</Dropdown>
	</SidebarFooter>
</Sidebar>

Component API

Prop	Default	Description
Sidebar
This component does not expose any component-specific props.
SidebarHeader extends the JSX <div> element
This component does not expose any component-specific props.
SidebarBody extends the JSX <nav> element
This component does not expose any component-specific props.
SidebarFooter extends the JSX <div> element
This component does not expose any component-specific props.
SidebarSection extends the JSX <div> element
This component does not expose any component-specific props.
SidebarDivider extends the JSX <hr> element
This component does not expose any component-specific props.
SidebarSpacer extends the JSX <div> element
This component does not expose any component-specific props.
SidebarHeading extends the JSX <div> element
This component does not expose any component-specific props.
SidebarItem extends the Headless UI Button component or the Link component
current	-	Whether or not it is the current navigation item.
href	-	The target URL when using the button as a link.
SidebarLabel extends the JSX <span> element
This component does not expose any component-specific props.

Examples

Basic example

Use the Sidebar, SidebarBody, SidebarSection, and SidebarItem components to build a basic sidebar:

<script>
	import { Sidebar, SidebarBody, SidebarItem, SidebarSection } from '$lib/components/sidebar';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">Home</SidebarItem>
			<SidebarItem href="/events">Events</SidebarItem>
			<SidebarItem href="/orders">Orders</SidebarItem>
			<SidebarItem href="/broadcasts">Broadcasts</SidebarItem>
			<SidebarItem href="/settings">Settings</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With logo

Add your own logo as an image or component to your sidebar, using utility classes to fine-tune the layout to suit your logo:

<script>
	import { Sidebar, SidebarBody, SidebarItem, SidebarSection } from '$lib/components/sidebar';
	import { Logo } from './logo';
</script>

<Sidebar>
	<SidebarBody>
		<div class="mb-2 flex">
			<a href="#" aria-label="Home">
				<Logo />
			</a>
		</div>
		<SidebarSection>
			<SidebarItem href="/">Home</SidebarItem>
			<SidebarItem href="/events">Events</SidebarItem>
			<SidebarItem href="/orders">Orders</SidebarItem>
			<SidebarItem href="/broadcasts">Broadcasts</SidebarItem>
			<SidebarItem href="/settings">Settings</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With icons

Add an icon as the first child of a SidebarItem to render it next to the link text:

<script>
	import {
		Sidebar,
		SidebarBody,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';
	HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

The SidebarItem component is designed to work best with 20×20 icons.

With active state

Use the current prop to specify which SidebarItem is the current navigation item:

<script>
	import {
		Sidebar,
		SidebarBody,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';
	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/" current>
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With sticky header

Use the SidebarHeader component before the SidebarBody component to add a sticky header to the sidebar:

<script>
	import {
		Sidebar,
		SidebarBody,
		SidebarHeader,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';

	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsInbox20Solid from 'virtual:icons/heroicons-inbox-20-solid';
	import HeroiconsMagnifyingGlass20Solid from 'virtual:icons/heroicons-magnifying-glass-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarHeader>
		<SidebarSection>
			<SidebarItem href="/search">
				<HeroiconsMagnifyingGlass20Solid />
				<SidebarLabel>Search</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/inbox">
				<HeroiconsInbox20Solid />
				<SidebarLabel>Inbox</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarHeader>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With sticky footer

Use the SidebarFooter component after the SidebarBody component to add a sticky footer to the sidebar:

<script>
	import { Avatar } from '$lib/components/avatar';
	import {
		Sidebar,
		SidebarBody,
		SidebarFooter,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';

	import HeroiconsChevronRight16Solid from 'virtual:icons/heroicons/chevron-right-16-solid';
	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
	<SidebarFooter>
		<SidebarSection>
			<SidebarItem>
				<Avatar src="/profile-photo.jpg" />
				<SidebarLabel>Erica</SidebarLabel>
				<HeroiconsChevronRight16Solid />
			</SidebarItem>
		</SidebarSection>
	</SidebarFooter>
</Sidebar>

With section headings

Use the SidebarHeading component to add a heading to a section:

<script>
	import {
		Sidebar,
		SidebarBody,
		SidebarHeading,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';
	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsQuestionMarkCircle20Solid from 'virtual:icons/heroicons-question-mark-circle-20-solid';
	import HeroiconsSparkles20Solid from 'virtual:icons/heroicons-sparkles-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
		<SidebarSection>
			<SidebarHeading>Resources</SidebarHeading>
			<SidebarItem href="/resources">
				<HeroiconsQuestionMarkCircle20Solid />
				<SidebarLabel>Support</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/changelog">
				<HeroiconsSparkles20Solid />
				<SidebarLabel>Changelog</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With space between sections

Use the SidebarSpacer component to space out sections in a sidebar:

<script>
	import {
		Sidebar,
		SidebarBody,
		SidebarItem,
		SidebarLabel,
		SidebarSection,
		SidebarSpacer
	} from '$lib/components/sidebar';

	import HeroiconsArrowRightStartOnRectangle16Solid from 'virtual:icons/heroicons-arrow-right-start-on-rectangle-16-solid';
	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
		<SidebarSpacer />
		<SidebarSection>
			<SidebarItem href="/logout">
				<HeroiconsArrowRightStartOnRectangle16Solid />
				<SidebarLabel>Sign out</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With divider

Use the SidebarDivider component to add a dividing line between sections in a sidebar:

<script>
	import {
		Sidebar,
		SidebarBody,
		SidebarDivider,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';

	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsQuestionMarkCircle20Solid from 'virtual:icons/heroicons-question-mark-circle-20-solid';
	import HeroiconsSparkles20Solid from 'virtual:icons/heroicons-sparkles-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
		<SidebarDivider />
		<SidebarSection>
			<SidebarItem href="/support">
				<HeroiconsQuestionMarkCircle20Solid />
				<SidebarLabel>Support</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/changelog">
				<HeroiconsSparkles20Solid />
				<SidebarLabel>Changelog</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

With dropdown

Use the Dropdown component add a dropdown menu to a sidebar by rendering the DropdownButton as a SidebarItem:

<script>
	import { Avatar } from '$lib/components/avatar';
	import {
		Dropdown,
		DropdownButton,
		DropdownDivider,
		DropdownItem,
		DropdownLabel,
		DropdownMenu
	} from '$lib/components/dropdown';
	import {
		Sidebar,
		SidebarBody,
		SidebarHeader,
		SidebarItem,
		SidebarLabel,
		SidebarSection
	} from '$lib/components/sidebar';

	import {
		HeroiconsChevronDown16Solid,
		HeroiconsCog8Tooth16Solid,
		HeroiconsPlus16Solid
	} from '@heroicons/react/16/solid';
	import HeroiconsCog6Tooth20Solid from 'virtual:icons/heroicons-cog-6-tooth-20-solid';
	import HeroiconsHome20Solid from 'virtual:icons/heroicons-home-20-solid';
	import HeroiconsMegaphone20Solid from 'virtual:icons/heroicons-megaphone-20-solid';
	import HeroiconsSquare2Stack20Solid from 'virtual:icons/heroicons-square-2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons-ticket-20-solid';
</script>

<Sidebar>
	<SidebarHeader>
		<Dropdown>
			<DropdownButton as={SidebarItem}>
				<Avatar src="/tailwind-logo.svg" />
				<SidebarLabel>Tailwind Labs</SidebarLabel>
				<HeroiconsChevronDown16Solid />
			</DropdownButton>
			<DropdownMenu class="min-w-64" anchor="bottom start">
				<DropdownItem href="/teams/1/settings">
					<HeroiconsCog8Tooth16Solid />
					<DropdownLabel>Settings</DropdownLabel>
				</DropdownItem>
				<DropdownDivider />
				<DropdownItem href="/teams/1">
					<Avatar slot="icon" src="/tailwind-logo.svg" />
					<DropdownLabel>Tailwind Labs</DropdownLabel>
				</DropdownItem>
				<DropdownItem href="/teams/2">
					<Avatar slot="icon" initials="WC" class="bg-purple-500 text-white" />
					<DropdownLabel>Workcation</DropdownLabel>
				</DropdownItem>
				<DropdownDivider />
				<DropdownItem href="/teams/create">
					<HeroiconsPlus16Solid />
					<DropdownLabel>New team&hellip;</DropdownLabel>
				</DropdownItem>
			</DropdownMenu>
		</Dropdown>
	</SidebarHeader>
	<SidebarBody>
		<SidebarSection>
			<SidebarItem href="/">
				<HeroiconsHome20Solid />
				<SidebarLabel>Home</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/events">
				<HeroiconsSquare2Stack20Solid />
				<SidebarLabel>Events</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/orders">
				<HeroiconsTicket20Solid />
				<SidebarLabel>Orders</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/broadcasts">
				<HeroiconsMegaphone20Solid />
				<SidebarLabel>Broadcasts</SidebarLabel>
			</SidebarItem>
			<SidebarItem href="/settings">
				<HeroiconsCog6Tooth20Solid />
				<SidebarLabel>Settings</SidebarLabel>
			</SidebarItem>
		</SidebarSection>
	</SidebarBody>
</Sidebar>

See the Dropdown docs for more information on building dropdown menus.