Sidebar

Collapsible vertical sidebar with header, nav items, and footer slots.

ExamplesCodeUsageChangelog

Open state

My App

DashboardReportsSettings

Log out

Tailwind v4

<script setup>
import { ref } from 'vue'
const open = ref(true)
</script>

<template>
  <div style="display: flex; height: 100vh;">
    <Sidebar v-model="open">
      <template #header>
        <span>My App</span>
      </template>
      <SidebarItem href="#" :active="true">Dashboard</SidebarItem>
      <SidebarItem href="#">Reports</SidebarItem>
      <SidebarItem href="#">Settings</SidebarItem>
      <template #footer>
        <SidebarItem href="#">Log out</SidebarItem>
      </template>
    </Sidebar>
    <main>
      <button @click="open = !open">Toggle</button>
    </main>
  </div>
</template>

Collapsed state

Setting v-model to false collapses to collapsedWidth (default 0).

◆ Home ⚙ Settings

Sidebar is collapsed to 56px icon-only width.

Tailwind v4

<Sidebar :model-value="false" :collapsed-width="56">
  <SidebarItem href="#" :active="true">
    <template #icon>◆</template>
    Home
  </SidebarItem>
  <SidebarItem href="#">
    <template #icon>⚙</template>
    Settings
  </SidebarItem>
</Sidebar>

Overlay (mobile)

Pass :overlay="true" to render the sidebar as a fixed overlay with a blanket behind it. Clicking the blanket closes it.

Menu

HomeAboutContact

Tailwind v4

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

<template>
  <button @click="open = true">Open sidebar</button>
  <Sidebar v-model="open" :overlay="true">
    <template #header>
      <span>Menu</span>
    </template>
    <SidebarItem href="#" :active="true">Home</SidebarItem>
    <SidebarItem href="#">About</SidebarItem>
    <SidebarItem href="#">Contact</SidebarItem>
  </Sidebar>
</template>

Sidebar Props

Prop	Type	Default	Description
modelValue	boolean	true	Controls open/closed state — use with v-model
width	number	240	Width in px when open
collapsedWidth	number	0	Width in px when collapsed
overlay	boolean	false	Renders as a fixed overlay with a backdrop; clicking the backdrop closes it

Sidebar Slots

Slot	Description
header	Content at the top of the sidebar (logo, app name)
default	Nav items — use SidebarItem
footer	Content at the bottom (user profile, logout)

SidebarItem Props

Prop	Type	Default	Description
href	string	—	Renders as <a> when provided, otherwise <button>
active	boolean	false	Highlights the item with primary blue background
icon	string	—	Short text/emoji icon (prefer the #icon slot for SVG icons)

SidebarItem Slots

Slot	Description
icon	Icon content (SVG or text) shown before the label
default	Item label