Skip to main content
The SidebarDetails.vue component creates an expandable/collapsible sidebar section. It accepts a title prop for the section title and a default slot for customizable content. This component is ideal for grouping related sidebar links or actions under a common title.

​
Features

Expandable Sidebar Section

Users can expand or collapse the section to view or hide its content, providing better space management.

Customizable Content

Use the default slot to insert any content, such as links, icons, or buttons, allowing flexible customization.

Dynamic Title

Accepts a title prop to dynamically set the section’s heading.

​
Usage

​
Basic Example

import { SidebarDetails } from '@robojuice/velure-ui';
import { SidebarLink } from '@robojuice/velure-ui';
import { IconDownload } from '@robojuice/velure-ui';

<SidebarDetails title="Admin">
  <SidebarLink href="/" class="router-link-active">
    <template #icon>
      <IconDownload name="DownloadLine" size="20" />
    </template>
    Dashboard
  </SidebarLink>
</SidebarDetails>

​
Props

​
open
boolean
default:"false"
The <details> is open or closed by default.
​
title
string
default:"''"
The title displayed in the summary of the details element.

​
Slots

​
default
slot
Content to display inside the collapsible section. <template #default></template>

​
Events

This component does not emit any custom events.

​
Example Use Cases

<SidebarDetails title="Settings">
  <SidebarLink href="/profile">
    <template #icon>
      <IconUser name="UserLine" size="20" />
    </template>
    Profile
  </SidebarLink>
  <SidebarLink href="/preferences">
    <template #icon>
      <IconSettings name="SettingsLine" size="20" />
    </template>
    Preferences
  </SidebarLink>
</SidebarDetails>

​
Open Details

<SidebarDetails title="Settings" :open="true">
  <SidebarLink href="/profile">
    <template #icon>
      <IconUser name="UserLine" size="20" />
    </template>
    Profile
  </SidebarLink>
  <SidebarLink href="/preferences">
    <template #icon>
      <IconSettings name="SettingsLine" size="20" />
    </template>
    Preferences
  </SidebarLink>
</SidebarDetails>

​
Notes

  • This component uses the <details> and <summary> HTML elements, which provide native expand/collapse functionality.
  • The content inside the component is fully customizable through the default slot.
  • Ensure to import related components, such as SidebarLink and IconDownload, as needed in your application.
For further customization, refer to the component’s source code.