Sidebar

A collapsible side panel for navigation and secondary content.

<script lang="ts">
import { Sidebar } from "coss-svelte";
</script>

<Sidebar
	class="h-64 w-56 rounded-lg border border-border"
	items={["Dashboard", "Projects", "Settings"]}
/>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger } from "coss-svelte";

Anatomy

Sidebar
SidebarContent
SidebarFooter
SidebarGroup
SidebarGroupAction
SidebarGroupContent
SidebarGroupLabel
SidebarHeader
SidebarInput
SidebarInset
SidebarMenu
SidebarMenuAction
SidebarMenuBadge
SidebarMenuButton
SidebarMenuItem
SidebarMenuSkeleton
SidebarMenuSub
SidebarMenuSubButton
SidebarMenuSubItem
SidebarProvider
SidebarRail
SidebarSeparator
SidebarTrigger

API Reference

Sidebar

A collapsible side panel for navigation and secondary content.

Prop	Type	Default	Description
`items`	`SidebarItem[]`	`[]`	Items rendered by the component's built-in fallback composition.
`label`	`string`	`"Sidebar"`	Accessible label or fallback visible label for the control.
`side`	`"right" \| "left"`	`"left"`	Side from which the surface appears.
`variant`	`"sidebar" \| "floating" \| "inset"`	`"sidebar"`	Visual variant for the component.
`collapsible`	`"none" \| "icon" \| "offcanvas"`	`"offcanvas"`	Controls how the sidebar collapses.
`state`	`"expanded" \| "collapsed"`	`"expanded"`	Visual state used by the sidebar fallback layout.

children : Snippet<[]>

Inherits from Svelte <aside> attributes.

SidebarContent

Wraps the primary content for the parent component.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarFooter

Groups footer content and actions for the parent component.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarGroup

Groups related items inside the parent component.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarGroupAction

Renders the primary action for the parent component.

Prop	Type	Default	Description
`type`	`"submit" \| "reset" \| "button" \| null`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.

children : Snippet<[]>

Inherits from Svelte <button> attributes.

SidebarGroupContent

Wraps the primary content for the parent component.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarGroupLabel

Labels a group of related items.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarHeader

Groups heading content for the parent component.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarInput

Renders the input field for the parent component.

children : Snippet<[]>

Inherits from Svelte <input> attributes.

SidebarInset

Wraps page content adjacent to the sidebar.

children : Snippet<[]>

Inherits from Svelte <main> attributes.

SidebarMenu

Groups sidebar menu items.

children : Snippet<[]>

Inherits from Svelte <ul> attributes.

SidebarMenuAction

Renders the primary action for the parent component.

Prop	Type	Default	Description
`type`	`"submit" \| "reset" \| "button" \| null`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.
`showOnHover`	`boolean`	`false`	Only reveals the menu action when the parent item is hovered or focused.

children : Snippet<[]>

Inherits from Svelte <button> attributes.

SidebarMenuBadge

Renders a badge inside a sidebar menu item.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarMenuButton

Renders a button-shaped control for the parent component.

Prop	Type	Default	Description
`href`	`string`	`undefined`	Renders the component as a link target when provided.
`type`	`"submit" \| "reset" \| "button" \| null`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.
`isActive`	`boolean`	`false`	Marks the item as the current or selected navigation target.
`size`	`ButtonSize`	`"default"`	Size variant for the component.
`variant`	`ButtonVariant`	`"default"`	Visual variant for the component.

children : Snippet<[]>

Inherits from Svelte <a> / <button> attributes.

SidebarMenuItem

Renders one selectable or repeated item.

children : Snippet<[]>

Inherits from Svelte <li> attributes.

SidebarMenuSkeleton

Renders a loading placeholder for sidebar menu content.

Prop	Type	Default	Description
`showIcon`	`boolean`	`false`	Shows the icon placeholder in the sidebar skeleton row.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarMenuSub

Groups nested sidebar menu content.

children : Snippet<[]>

Inherits from Svelte <ul> attributes.

SidebarMenuSubButton

Renders a button-shaped control for the parent component.

Prop	Type	Default	Description
`href`	`string`	`"#"`	Renders the component as a link target when provided.
`isActive`	`boolean`	`false`	Marks the item as the current or selected navigation target.
`size`	`"md" \| "sm" \| "lg"`	`"md"`	Size variant for the component.

children : Snippet<[]>

Inherits from Svelte <a> attributes.

SidebarMenuSubItem

Renders one selectable or repeated item.

children : Snippet<[]>

Inherits from Svelte <li> attributes.

SidebarProvider

Provides shared state and context to child components.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`true`	Initial open state for the sidebar provider.
`bind:open`	`boolean`	`defaultOpen`	Open state for the popup or disclosure. Bind with `bind:open`.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarRail

Renders the sidebar resize or collapse rail.

Prop	Type	Default	Description
`type`	`"submit" \| "reset" \| "button" \| null`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.

children : Snippet<[]>

Inherits from Svelte <button> attributes.

SidebarSeparator

Visually separates related content.

children : Snippet<[]>

Inherits from Svelte <div> attributes.

SidebarTrigger

Renders the control that opens, closes, or selects related content.

Prop	Type	Default	Description
`type`	`"submit" \| "reset" \| "button" \| null`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.

children : Snippet<[]>

Inherits from Svelte <button> attributes.

Implementation Details

Status: Experimental
Foundation: compound
Category: Layout & Navigation
Particles: 0

Status

Experimental in 0.1.0: the compound sidebar and controlled collapsed state are available; responsive drawer behavior and persisted layout state are not yet complete.