DashboardSidebarToggle

Usage

<SDashboardNavbar title="Overview">
  <template #leading>
    <SDashboardSidebarToggle />
  </template>
</SDashboardNavbar>

Nothing renders it for you - drop it into DashboardNavbar's leading slot (the common case, shown above), or anywhere else inside the same DashboardGroup that makes sense for a given layout - inside DashboardSidebar's own header instead of the navbar, say, or a custom toolbar.

Renders nothing until there's an actual sibling DashboardSidebar in the same DashboardGroup to control.

Replacing the button entirely

The default slot hands a fully custom trigger the same toggle function and isCollapsed state the built-in Button uses internally, rather than just swapping props on it:

<SDashboardSidebarToggle v-slot="{ toggle, isCollapsed, attrs }">
  <button v-bind="attrs" type="button" @click="toggle">
    {{ isCollapsed ? 'Show' : 'Hide' }} sidebar
  </button>
</SDashboardSidebarToggle>

Customizing the icon or button

A thin wrapper around Button - icon swaps the glyph, and anything else Button accepts (color, variant, size, ui, ...) passes straight through:

<SDashboardSidebarToggle icon="lucide:menu" color="primary" variant="soft" />

The default icon (hugeicons:sidebar-left-01) mirrors horizontally once the sidebar collapses, rather than swapping to a second icon - a custom icon gets the same treatment, so pick one that still reads correctly flipped.

Props

Slots