> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Sidebar Details

> SidebarDetails.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Expandable Sidebar Section" icon="square-1">
    Users can expand or collapse the section to view or hide its content, providing better space management.
  </Card>

  <Card title="Customizable Content" icon="square-2">
    Use the default slot to insert any content, such as links, icons, or buttons, allowing flexible customization.
  </Card>

  <Card title="Dynamic Title" icon="square-3">
    Accepts a <code>title</code> prop to dynamically set the section's heading.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { SidebarDetails } from '@robojuice/velure-ui';
import { SidebarLink } from '@robojuice/velure-ui';
import { IconDownload } from '@robojuice/velure-ui';
```

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

***

## Props

<ParamField path="open" type="boolean" default="false">
  The `<details>` is open or closed by default.
</ParamField>

<ParamField path="title" type="string" default="''">
  The title displayed in the summary of the details element.
</ParamField>

***

## Slots

<ParamField path="default" type="slot">
  Content to display inside the collapsible section. `<template #default></template>`
</ParamField>

***

## Events

This component does not emit any custom events.

***

## Example Use Cases

### Sidebar Section for Links

```vue theme={null}
<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

```vue theme={null}
<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.