Sidebar

A vertical navigation component that provides a collapsible sidebar layout for application navigation.

Anatomy 

<script>
  import {
    Sidebar,
    SidebarRoot,
    SidebarHeader,
    SidebarBody,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupHeader,
    SidebarGroupTitle,
    SidebarGroupLabel,
    SidebarGroupContent,
    SidebarNavItem,
    SidebarNavButton,
    SidebarItem,
    SidebarLink,
    SidebarToggle,
  } from "@saas-ui/svelte/components/sidebar";
</script>

<Sidebar.Root>
  <Sidebar.Header>
    <Logo />
  </Sidebar.Header>
  <Sidebar.Body>
    <Sidebar.Group>
      <Sidebar.GroupHeader>
        <Sidebar.GroupTitle>Navigation</Sidebar.GroupTitle>
      </Sidebar.GroupHeader>
      <Sidebar.GroupContent>
        <Sidebar.NavItem href="/dashboard">Dashboard</Sidebar.NavItem>
        <Sidebar.NavItem href="/settings">Settings</Sidebar.NavItem>
      </Sidebar.GroupContent>
    </Sidebar.Group>
  </Sidebar.Body>
  <Sidebar.Footer>
    <Sidebar.Toggle />
  </Sidebar.Footer>
</Sidebar.Root>

Examples

Basic Accessibility

Basic sidebar with navigation items.

Props

Sidebar.Root

The main sidebar container component.

Prop Type Default Description
children Snippet - The content to render inside the sidebar.
class string - Additional CSS classes to apply.

Sidebar.Header

The header section of the sidebar.

Prop Type Default Description
children Snippet - The content to render inside the sidebar header.
class string - Additional CSS classes to apply.

Sidebar.Body

The main scrollable body section of the sidebar.

Prop Type Default Description
children Snippet - The content to render inside the sidebar body.
class string - Additional CSS classes to apply.

Sidebar.Footer

The footer section of the sidebar.

Prop Type Default Description
children Snippet - The content to render inside the sidebar footer.
class string - Additional CSS classes to apply.

Sidebar.Group

A group container for organizing sidebar items.

Prop Type Default Description
children Snippet - The content to render inside the sidebar group.
class string - Additional CSS classes to apply.

Sidebar.GroupHeader

The header section of a sidebar group.

Prop Type Default Description
children Snippet - The content to render inside the group header.
class string - Additional CSS classes to apply.

Sidebar.GroupTitle

The title element for a sidebar group.

Prop Type Default Description
children Snippet - The title text or content.
class string - Additional CSS classes to apply.

Sidebar.GroupLabel

A label element for a sidebar group.

Prop Type Default Description
children Snippet - The label text or content.
class string - Additional CSS classes to apply.

Sidebar.GroupContent

The content area of a sidebar group.

Prop Type Default Description
children Snippet - The content to render inside the group content area.
class string - Additional CSS classes to apply.

Sidebar.NavItem

A navigation item wrapper element.

Prop Type Default Description
children Snippet - The content to render inside the nav item.
class string - Additional CSS classes to apply.

Sidebar.NavButton

A button-style navigation element.

Prop Type Default Description
active boolean false Whether this button is currently active.
children Snippet - The content to render inside the nav button (icon + label).
class string - Additional CSS classes to apply.

Sidebar.Item

A clickable sidebar item with icon support.

Prop Type Default Description
active boolean false Whether this item is currently active.
icon Component - Icon component to display before the label. Auto-sized to fit.
children Snippet - The label text or content.
class string - Additional CSS classes to apply.

Sidebar.Link

A navigation link element with icon support.

Prop Type Default Description
active boolean false Whether this link is currently active.
icon Component - Icon component to display before the label. Auto-sized to fit.
href string - The URL the link points to.
children Snippet - The label text or content.
class string - Additional CSS classes to apply.

Sidebar.Toggle

A button to toggle the sidebar collapsed state.

Prop Type Default Description
onclick (collapsed: boolean) => void - Callback when the toggle is clicked.
children Snippet - The icon or content to display in the toggle.
class string - Additional CSS classes to apply.