Components
Sidebar
Build a navigation drawer with rail (compact) and responsive mobile states.
UiSidebar is a navigation drawer composed from region sub-components. It tracks two independent states:
rail— compact, icons-only mode (a desktop concern). One-way; the parent controls it.open— the responsive mobile slide-in. Supportsv-model:open; on desktop the drawer is always visible.
Build a sidebar
<script setup lang="ts">
import { NuxtLink } from '#components'
import { ref } from 'vue'
const rail = ref(false) // compact (desktop)
const open = ref(false) // mobile drawer
</script>
<template>
<UiSidebar bordered :rail="rail" v-model:open="open" aria-label="Main navigation">
<UiSidebarHeader>
<UiSidebarDropdown title="Acme" subtitle="Workspace" />
</UiSidebarHeader>
<UiSidebarBody>
<UiSidebarText text="Platform" />
<UiSidebarLink :as="NuxtLink" to="/" text="Home" icon="" tooltip-text="Home" />
<UiSidebarLink :as="NuxtLink" to="/projects" text="Projects" icon="" />
<UiSidebarGroup text="Account" collapsible :default-open="true" icon="">
<UiSidebarLink :as="NuxtLink" to="/account" text="Profile" icon="" child />
<UiSidebarLink :as="NuxtLink" to="/notifications" text="Notifications" icon="" child />
</UiSidebarGroup>
</UiSidebarBody>
<UiSidebarFooter>
<UiBadge text="v1.0.0" variant="outline" size="sm" />
</UiSidebarFooter>
</UiSidebar>
</template>
Toggle the mobile drawer
Wire open to a toggle (e.g. in your navbar):
<template>
<UiNavbarToggle :collapsed="open" @toggle="open = !open" />
</template>
UiSidebar props
| Prop | Type | Default | Description |
|---|---|---|---|
bordered | boolean | false | Right border instead of shadow. |
rail | boolean | false | Compact icons-only mode (one-way). |
open | boolean | false | Mobile open state (v-model:open). |
width | string | null | null | Sets --theme-nav-drawer-width. |
ariaLabel | string | 'Main navigation' | Landmark name. |
Emits: update:open.
Region & item components
| Component | Key props |
|---|---|
UiSidebarHeader / UiSidebarBody / UiSidebarFooter | customClass |
UiSidebarText | text |
UiSidebarLink | as, to / href, text, icon, tooltipText, tooltipPlacement, child, active, disabled |
UiSidebarGroup | text, icon, collapsible, defaultOpen |
UiSidebarDropdown | title, subtitle, interactive, placement |