Sidebar

A structured navigation sidebar with three distinct sections: a header for branding, a scrollable content area for navigation, and a footer for secondary actions. Pair it with CoarMenu (using the borderless prop) to build full application navigation in minutes.

import { CoarSidebar } from '@cocoar/vue-ui';

Basic Sidebar

A typical sidebar layout with a brand logo in the header, a flat list of nav items in the body, and a logout action in the footer. The content area scrolls independently when there are more items than the sidebar can display.

C

cocoar

Dashboard

Profile

Projects

Settings

Logout

vue

<template>
  <div style="height: 360px; border: 1px solid var(--coar-border-neutral-secondary); border-radius: 8px; overflow: hidden; display: flex;">
    <CoarSidebar>
      <template #header>
        <div style="display: flex; align-items: center; gap: 8px; padding: 4px;">
          <div style="width: 28px; height: 28px; background: var(--coar-background-accent-primary); color: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0;">C</div>
          <strong>cocoar</strong>
        </div>
      </template>

      <CoarMenu borderless>
        <CoarMenuItem icon="home">Dashboard</CoarMenuItem>
        <CoarMenuItem icon="user">Profile</CoarMenuItem>
        <CoarMenuItem icon="list">Projects</CoarMenuItem>
        <CoarMenuItem icon="settings">Settings</CoarMenuItem>
      </CoarMenu>

      <template #footer>
        <CoarMenu borderless>
          <CoarMenuDivider />
          <CoarMenuItem icon="log-out">Logout</CoarMenuItem>
        </CoarMenu>
      </template>
    </CoarSidebar>
  </div>
</template>

<script setup lang="ts">
import { CoarSidebar, CoarMenu, CoarMenuItem, CoarMenuDivider } from '@cocoar/vue-ui';
</script>

With Sections & Submenus

For larger applications, organize navigation into labeled sections with CoarMenuHeading and nest related pages under expandable CoarSubExpand groups. This keeps a complex information architecture browsable without overwhelming the user.

A

Admin Panel

Main

Dashboard

Projects

Management

Users

All Users

Roles

Permissions

Reports

Sales

Analytics

System

Settings

Localization

John Doe

Logout

vue

<template>
  <div style="height: 360px; border: 1px solid var(--coar-border-neutral-secondary); border-radius: 8px; overflow: hidden; display: flex;">
    <CoarSidebar>
      <template #header>
        <div style="display: flex; align-items: center; gap: 8px; padding: 4px;">
          <div style="width: 28px; height: 28px; background: var(--coar-background-accent-primary); color: white; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; flex-shrink: 0;">A</div>
          <strong>Admin Panel</strong>
        </div>
      </template>

      <CoarMenu borderless>
        <CoarMenuHeading>Main</CoarMenuHeading>
        <CoarMenuItem icon="home">Dashboard</CoarMenuItem>
        <CoarMenuItem icon="list">Projects</CoarMenuItem>
        <CoarMenuHeading>Management</CoarMenuHeading>
        <CoarSubExpand label="Users">
          <CoarMenuItem>All Users</CoarMenuItem>
          <CoarMenuItem>Roles</CoarMenuItem>
          <CoarMenuItem>Permissions</CoarMenuItem>
        </CoarSubExpand>
        <CoarSubExpand label="Reports">
          <CoarMenuItem>Sales</CoarMenuItem>
          <CoarMenuItem>Analytics</CoarMenuItem>
        </CoarSubExpand>
        <CoarMenuHeading>System</CoarMenuHeading>
        <CoarMenuItem icon="settings">Settings</CoarMenuItem>
        <CoarMenuItem icon="globe">Localization</CoarMenuItem>
      </CoarMenu>

      <template #footer>
        <CoarMenu borderless>
          <CoarMenuDivider />
          <CoarMenuItem icon="user">John Doe</CoarMenuItem>
          <CoarMenuItem icon="log-out">Logout</CoarMenuItem>
        </CoarMenu>
      </template>
    </CoarSidebar>
  </div>
</template>

<script setup lang="ts">
import { CoarSidebar, CoarMenu, CoarMenuItem, CoarMenuDivider, CoarMenuHeading, CoarSubExpand } from '@cocoar/vue-ui';
</script>

API

Props

Prop	Type	Default	Description
position	'left' | 'right'	'left'	Sidebar position
collapsed	boolean	false	Narrow/icon-only collapsed state
ariaLabel	string	'Sidebar'	Accessible label for the nav landmark

Slots

Slot	Description
#header	Top section -- logo, brand, workspace switcher
default	Scrollable content area -- typically a CoarMenu
#footer	Bottom section -- user profile, logout, secondary actions