Skip to content

Sidebar

A sidebar component for app-wide navigation.

Usage

vue
<script setup lang="ts">
import { Sidebar, SidebarItem, SidebarSubitem } from '@youcan/ui-vue3';
</script>

<template>
  <Sidebar>
    <template #header>
      <p>Awesome App</p>
    </template>
    <template #items>
      <SidebarItem label="Item 1" :active="true" icon="">
        <template>
          <SidebarSubitem label="Sub Item 1" />
        </template>
      </SidebarItem>
    </template>
    <template #lower-items>
      <SidebarItem label="Settings" icon="i-youcan-gear" />
    </template>
  </Sidebar>
</template>

API Reference

API Reference

API Reference