Catalyst UI Kit + Svelte

First sidebars are cool, then they're dated, then they're cool again — I think they're cool right now though so we built you this one.

Open in new tab

<script>
	import { Avatar } from '$lib/components/avatar';
	import {
		Dropdown,
		DropdownButton,
		DropdownDivider,
		DropdownItem,
		DropdownLabel,
		DropdownMenu
	} from '$lib/components/dropdown';
	import { Navbar, NavbarItem, NavbarSection, NavbarSpacer } from '$lib/components/navbar';
	import {
		Sidebar,
		SidebarBody,
		SidebarFooter,
		SidebarHeader,
		SidebarHeading,
		SidebarItem,
		SidebarLabel,
		SidebarSection,
		SidebarSpacer
	} from '$lib/components/sidebar';
	import { SidebarLayout } from '$lib/components/sidebar-layout';

	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/cog6-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/square2-stack-20-solid';
	import HeroiconsTicket20Solid from 'virtual:icons/heroicons/ticket-20-solid';
</script>

<SidebarLayout>
	{#snippet navbar()}
		<Navbar>
			<NavbarSpacer />
			<NavbarSection>
				<NavbarItem href="/search" aria-label="Search">
					<HeroiconsMagnifyingGlass20Solid />
				</NavbarItem>
				<NavbarItem href="/inbox" aria-label="Inbox">
					<HeroiconsInbox20Solid />
				</NavbarItem>
				<Dropdown>
					<DropdownButton as={NavbarItem}>
						<Avatar src="/profile-photo.jpg" square />
					</DropdownButton>
					<DropdownMenu class="min-w-64" anchor="bottom end">
						<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>
			</NavbarSection>
		</Navbar>
	{/snippet}

	{#snippet sidebar()}
		<Sidebar>
			<SidebarHeader>
				<Dropdown>
					<DropdownButton as={SidebarItem} class="lg:mb-2.5">
						<Avatar src="/tailwind-logo.svg" />
						<SidebarLabel>Tailwind Labs</SidebarLabel>
						<HeroiconsChevronDown16Solid />
					</DropdownButton>
					<DropdownMenu class="min-w-80 lg: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 class="max-lg:hidden">
					<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="/settings">
						<HeroiconsCog6Tooth20Solid />
						<SidebarLabel>Settings</SidebarLabel>
					</SidebarItem>
					<SidebarItem href="/broadcasts">
						<HeroiconsMegaphone20Solid />
						<SidebarLabel>Broadcasts</SidebarLabel>
					</SidebarItem>
				</SidebarSection>
				<SidebarSection class="max-lg:hidden">
					<SidebarHeading>Upcoming Events</SidebarHeading>
					<SidebarItem href="/events/1">Bear Hug: Live in Concert</SidebarItem>
					<SidebarItem href="/events/2">Viking People</SidebarItem>
					<SidebarItem href="/events/3">Six Fingers — DJ Set</SidebarItem>
					<SidebarItem href="/events/4">We All Look The Same</SidebarItem>
				</SidebarSection>
				<SidebarSpacer />
				<SidebarSection>
					<SidebarItem href="/support">
						<HeroiconsQuestionMarkCircle20Solid />
						<SidebarLabel>Support</SidebarLabel>
					</SidebarItem>
					<SidebarItem href="/changelog">
						<HeroiconsSparkles20Solid />
						<SidebarLabel>Changelog</SidebarLabel>
					</SidebarItem>
				</SidebarSection>
			</SidebarBody>
			<SidebarFooter class="max-lg:hidden">
				<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>
	{/snippet}

	<!-- The page content -->
</SidebarLayout>

Component API

Prop	Default	Description
SidebarLayout extends the JSX `<div>` element
`sidebar`	-	The `Sidebar` menu for all screen sizes.
`navbar`	-	The `Navbar` menu for mobile screen sizes.
`children`	-	The page content.

Examples

Basic example

Wrap your page content with the SidebarLayout component to create a sidebar layout, using the sidebar prop to add your sidebar menu content, and the navbar prop for your top navigation on smaller screens:

<script>
	import { Navbar } from '$lib/components/navbar';
	import { Sidebar } from '$lib/components/sidebar';
	import { SidebarLayout } from '$lib/components/sidebar-layout';
</script>

<SidebarLayout>
	{#snippet sidebar()}
		<Sidebar>
			<!-- Your sidebar content -->
		</Sidebar>
	{/snippet}

	{#snippet navbar()}
		<Navbar>
			<!-- Your navbar content -->
		</Navbar>
	{/snippet}

	<!-- Your page content -->
</SidebarLayout>

See the Sidebar and Navbar docs for more details.

Setting the overscroll background

Adding the following classes to the html element in your project to make sure the site background matches the layout background when overscrolling the body:

<html class="bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
	<head>
		<!-- ... -->
	</head>
	<body>
		<!-- ... -->
	</body>
</html>

Sidebar layout

Component API

Examples

Basic example

Setting the overscroll background