Nuxt UI v3-alpha has been released!

Try it out

DashboardSidebar

A scrollable container to display links inside a DashboardPanel.

Usage

The DashboardSidebar component is a scrollable container with some padding to display some DashboardSidebarLinks and contains a sticky #header and #footer.

It is generally placed inside a DashboardPanel under the DashboardNavbar component.

layouts/default.vue
<template>
  <UDashboardLayout>
    <UDashboardPanel>
      <UDashboardNavbar />

      <UDashboardSidebar>
        <template #header>
          <!-- Place anything you like here -->
          <UDashboardSearchButton />
        </template>

        <UDashboardSidebarLinks />

        <UDivider />

        <UDashboardSidebarLinks />

        <template #footer>
          <!-- Place anything you like here -->
        </template>
      </UDashboardSidebar>
    </UDashboardPanel>

    <slot />
  </UDashboardLayout>
</template>

Slots

header
{}
default
{}
footer
{}

Props

ui
DeepPartial<{ wrapper: string; container: string; header: string; body: string; footer: string; }>
{}

Config

{
  wrapper: 'flex flex-col w-full flex-1 relative overflow-hidden',
  container: 'flex-grow flex flex-col min-h-0 gap-y-2 py-2',
  header: 'w-full flex flex-col px-4',
  body: 'flex-1 px-4 flex flex-col gap-y-2 overflow-y-auto',
  footer: 'flex items-center justify-between gap-x-1.5 flex-shrink-0 px-4'
}