DashboardSidebarCollapse

ButtonGitHub
A Button to collapse the sidebar on desktop.

Usage

The DashboardSidebarCollapse component is used to collapse/expand the DashboardSidebar component when its collapsible prop is set.

<template>
  <UDashboardSidebarCollapse />
</template>

It extends the Button component, so you can pass any property such as color, variant, size, etc.

<template>
  <UDashboardSidebarCollapse variant="subtle" />
</template>
The button defaults to color="neutral" and variant="ghost".

Examples

Within header slot

You can put this component in the header slot of the DashboardSidebar component and use the collapsed prop to hide the left part of the header for example:

layouts/dashboard.vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar collapsible>
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" />

        <UDashboardSidebarCollapse variant="subtle" />
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

Within leading slot

You can put this component in the leading slot of the DashboardNavbar component to display it before the title for example:

pages/index.vue
<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Home">
        <template #leading>
          <UDashboardSidebarCollapse variant="subtle" />
        </template>
      </UDashboardNavbar>
    </template>
  </UDashboardPanel>
</template>

API

Props

Prop Default Type
as

any

The element or component this component should render as when not a link.

color

'neutral'

variant

'ghost'

side

'left'

"left" | "right"

The side of the sidebar to collapse.

name

string

form

string

label

string

to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

Route Location the link should navigate to when clicked on.

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

Where to display the linked URL, as the name for a browsing context.

trailingSlash

"append" | "remove"

An option to either add or remove trailing slashes in the href for this specific link. Overrides the global trailingSlash option if provided.

autofocus
disabled

boolean

formaction

string

formenctype

string

formmethod

string

formnovalidate

false | true | "true" | "false"

formtarget

string

type

'button'

"reset" | "submit" | "button"

The type of the button when not a link.

value

string | number | readonly string[]

download

any

hreflang

string

media

string

ping

string

referrerpolicy

"" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"

active

boolean

Force the link to be active independent of the current route.

activeColor

"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"

activeVariant

"link" | "ghost" | "solid" | "outline" | "soft" | "subtle"

size

'md'

"xs" | "sm" | "md" | "lg" | "xl"

square

boolean

Render the button with equal padding on all sides.

block

boolean

Render the button full width.

loadingAuto

boolean

Set loading state automatically based on the @click promise state

icon

string | object

Display an icon based on the leading and trailing props.

avatar

AvatarProps

Display an avatar on the left side.

leading

boolean

When true, the icon will be displayed on the left side.

leadingIcon

string | object

Display an icon on the left side.

trailing

boolean

When true, the icon will be displayed on the right side.

trailingIcon

string | object

Display an icon on the right side.

loading

boolean

When true, the loading icon will be displayed.

loadingIcon

appConfig.ui.icons.loading

string | object

The icon when the loading prop is true.

ui

{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

This component also supports all native <button> HTML attributes.

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    dashboardSidebarCollapse: {
      base: 'hidden lg:flex',
      variants: {
        side: {
          left: '',
          right: ''
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSidebarCollapse: {
          base: 'hidden lg:flex',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Changelog

5cb65 — feat: import @nuxt/ui-pro components

DashboardSidebar

A resizable and collapsible sidebar to display in a dashboard.

DashboardSidebarToggle

A Button to toggle the sidebar on mobile.