# Sidebar Item

One row of the sidebar, with an optional symbol before the title and a badge after it.

A sidebar item is one row of the sidebar: a title, an optional symbol before it and an optional badge after it. The search palette lists its results with the same component.

::component-preview{src="~/demos/SidebarItemDemo.vue"}
::

## Usage

```vue
<template>
  <docs-sidebar-item to="/guide/getting-started">
    Getting Started
  </docs-sidebar-item>
</template>
```

`to` takes a route or a URL, and an item without it renders as text. An item does not check the route itself: set `active` on the current one, as `DocsSidebarNav` does.

```vue
<template>
  <docs-sidebar-item to="/guide/configuration" active>
    Configuration
  </docs-sidebar-item>
</template>
```

## Symbols and badges

The `symbol` slot sits before the title and sizes an SVG inside it to 14px. The `trailing` slot sits after the title, where the sidebar puts a page’s badge and the search palette puts the headings above a result.

```vue
<template>
  <docs-sidebar-item to="/components/table-of-contents">
    <template #symbol>
      <base-icon name="document" />
    </template>
    Table of Contents
    <template #trailing>
      <span class="rounded-component-compact-sm bg-accent-subtle docs-label px-1.5">
        New
      </span>
    </template>
  </docs-sidebar-item>
</template>
```

## API reference

### Props

::docs-table
---
columns:
  - label: Prop
  - label: Type
  - label: Default
rows:
  - items:
      - label: to
        description: A route or a URL. Without it, the item renders as text.
      - label: string
      - label: none
        plaintext: true
  - items:
      - label: active
        description: Marks the item as the current one.
      - label: boolean
      - label: 'false'
  - items:
      - label: disabled
        description: Mutes the item and stops it taking input.
      - label: boolean
      - label: 'false'
---
::

### Slots

::docs-table
---
columns:
  - label: Slot
  - label: Content
rows:
  - items:
      - label: default
      - label: The title. It truncates rather than wraps.
        plaintext: true
  - items:
      - label: symbol
      - label: A symbol before the title, sized to 14px.
        plaintext: true
  - items:
      - label: trailing
      - label: Anything after the title, such as a badge.
        plaintext: true
---
::

### Data attributes

::data-attributes
::