---
url: "https://vueda.dev/v3/reference/theming/keys/Sidebar.md"
title: "Sidebar"
---

# Sidebar

Source: `client/lib/theme/vueda-tailwind/navigation/index.js`

> Uncollapsed sidebar body for the `none` collapsible mode.

Vue component: [Sidebar](/v3/reference/api/vue/Sidebar.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [rootNone](/v3/reference/theming/keys/Sidebar.md#theme-key-Sidebar-rootNone) | `bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col` | Uncollapsed sidebar body for the `none` collapsible mode. |
| [spacer](/v3/reference/theming/keys/Sidebar.md#theme-key-Sidebar-spacer) | callback | Layout spacer that preserves desktop content offset while the fixed panel transitions. |
| [panel](/v3/reference/theming/keys/Sidebar.md#theme-key-Sidebar-panel) | callback | Fixed desktop panel. Width and offcanvas transitions are driven by SidebarProvider CSS variables. |

<a id="theme-key-Sidebar-rootNone"></a>

## rootNone

> Uncollapsed sidebar body for the `none` collapsible mode.

Default classes:

`bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col`

Source: `client/lib/theme/vueda-tailwind/navigation/Sidebar.theme.js:16`

<a id="theme-key-Sidebar-spacer"></a>

## spacer

> Layout spacer that preserves desktop content offset while the fixed panel transitions.

Callback:

```javascript
({ variant }) => ({
            class: [
                // Layout and motion.
                "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",

                // Data attribute states.
                "group-data-[collapsible=offcanvas]:w-0",
                "group-data-[side=right]:rotate-180",
                {
                    "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]":
                        variant === "floating" || variant === "inset",
                    "group-data-[collapsible=icon]:w-(--sidebar-width-icon)":
                        variant !== "floating" && variant !== "inset",
                },
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/navigation/Sidebar.theme.js:20`

<a id="theme-key-Sidebar-panel"></a>

## panel

> Fixed desktop panel. Width and offcanvas transitions are driven by SidebarProvider CSS variables.

Callback:

```javascript
({ side, variant }) => ({
            class: [
                // Positioning and sizing.
                "fixed inset-y-0 z-40 hidden h-svh w-(--sidebar-width)",

                // Motion and responsive layout.
                "transition-[left,right,width] duration-200 ease-linear md:flex",

                // Side states.
                {
                    "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]": side === "left",
                    "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]":
                        side === "right",
                },

                // Variant classes.
                {
                    "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]":
                        variant === "floating" || variant === "inset",
                    "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r-hairline group-data-[side=right]:border-l-hairline":
                        variant !== "floating" && variant !== "inset",
                },
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/navigation/Sidebar.theme.js:37`