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.
- Sidebar
- Sidebar Item
- Table of Contents New
- GitHub
- Changelog
<template>
<ul class="flex w-56 flex-col gap-1">
<li>
<docs-sidebar-item to="/components/sidebar">Sidebar</docs-sidebar-item>
</li>
<li>
<docs-sidebar-item to="/components/sidebar-item" active>
Sidebar Item
</docs-sidebar-item>
</li>
<li>
<docs-sidebar-item to="/components/table-of-contents">
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>
</li>
<li>
<docs-sidebar-item to="https://github.com/magicasaservice/docs">
<template #symbol>
<base-icon name="brand-github" />
</template>
GitHub
</docs-sidebar-item>
</li>
<li>
<docs-sidebar-item disabled>Changelog</docs-sidebar-item>
</li>
</ul>
</template>Usage
<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.
<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.
<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>