> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar

> A composable, themeable and customizable sidebar component.

Sidebars are one of the most complex components to build. They are central to any application and often contain a lot of moving parts.

Shad doesn't like building sidebars, so he built 30+ of them with all kinds of configurations. The core components have been extracted into `sidebar-*.svelte` files, and you can use them in your own projects.

We now have a solid foundation to build on top of. Composable. Themeable. Customizable.

[Browse the Blocks Library](/blocks).

## Installation

<Tabs>
  <Tab title="CLI">
    <Steps>
      <Step title="Install the sidebar components">
        ```bash theme={null}
        npx shadcn-svelte@next add sidebar
        ```
      </Step>

      <Step title="Add colors to your CSS file">
        We'll go over the colors later in the theming section.

        ```css title="src/routes/layout.css" theme={null}
        :root {
          --sidebar: oklch(0.985 0 0);
          --sidebar-foreground: oklch(0.145 0 0);
          --sidebar-primary: oklch(0.205 0 0);
          --sidebar-primary-foreground: oklch(0.985 0 0);
          --sidebar-accent: oklch(0.97 0 0);
          --sidebar-accent-foreground: oklch(0.205 0 0);
          --sidebar-border: oklch(0.922 0 0);
          --sidebar-ring: oklch(0.708 0 0);
        }

        .dark {
          --sidebar: oklch(0.205 0 0);
          --sidebar-foreground: oklch(0.985 0 0);
          --sidebar-primary: oklch(0.488 0.243 264.376);
          --sidebar-primary-foreground: oklch(0.985 0 0);
          --sidebar-accent: oklch(0.269 0 0);
          --sidebar-accent-foreground: oklch(0.985 0 0);
          --sidebar-border: oklch(1 0 0 / 10%);
          --sidebar-ring: oklch(0.439 0 0);
        }
        ```
      </Step>
    </Steps>
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="Copy and paste the component source">
        Copy and paste the component source code into your project.
      </Step>

      <Step title="Add colors to your CSS file">
        We'll go over the colors later in the theming section.

        ```css title="src/routes/layout.css" theme={null}
        :root {
          --sidebar: oklch(0.985 0 0);
          --sidebar-foreground: oklch(0.145 0 0);
          --sidebar-primary: oklch(0.205 0 0);
          --sidebar-primary-foreground: oklch(0.985 0 0);
          --sidebar-accent: oklch(0.97 0 0);
          --sidebar-accent-foreground: oklch(0.205 0 0);
          --sidebar-border: oklch(0.922 0 0);
          --sidebar-ring: oklch(0.708 0 0);
        }

        .dark {
          --sidebar: oklch(0.205 0 0);
          --sidebar-foreground: oklch(0.985 0 0);
          --sidebar-primary: oklch(0.488 0.243 264.376);
          --sidebar-primary-foreground: oklch(0.985 0 0);
          --sidebar-accent: oklch(0.269 0 0);
          --sidebar-accent-foreground: oklch(0.985 0 0);
          --sidebar-border: oklch(1 0 0 / 10%);
          --sidebar-ring: oklch(0.439 0 0);
        }
        ```
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Structure

A `Sidebar` component is composed of the following parts:

* `Sidebar.Provider` - Handles collapsible state.
* `Sidebar.Root` - The sidebar container.
* `Sidebar.Header` and `Sidebar.Footer` - Sticky at the top and bottom of the sidebar.
* `Sidebar.Content` - Scrollable content.
* `Sidebar.Group` - Section within the `Sidebar.Content`.
* `Sidebar.Trigger` - Trigger for the `Sidebar`.

## Usage

```svelte showLineNumbers title="src/routes/+layout.svelte" theme={null}
<script lang="ts">
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
  import AppSidebar from "$lib/components/app-sidebar.svelte";

  let { children } = $props();
</script>

<Sidebar.Provider>
  <AppSidebar />
  <main>
    <Sidebar.Trigger />
    {@render children?.()}
  </main>
</Sidebar.Provider>
```

```svelte showLineNumbers title="src/lib/components/app-sidebar.svelte" theme={null}
<script lang="ts">
  import * as Sidebar from "$lib/components/ui/sidebar/index.js";
</script>

<Sidebar.Root>
  <Sidebar.Header />
  <Sidebar.Content>
    <Sidebar.Group />
    <Sidebar.Group />
  </Sidebar.Content>
  <Sidebar.Footer />
</Sidebar.Root>
```

For complete documentation on all components, props, and advanced usage, visit the [shadcn-svelte documentation](https://shadcn-svelte.com/docs/components/sidebar).

## Links

* [Source](https://github.com/huntabyte/shadcn-svelte/tree/next/sites/docs/src/lib/registry/ui/sidebar)