Sidebar

The sidebar lists every page, grouped by the folder it sits in, and marks the page the reader is on. From 1024px it is a column left of the content; below that, the same list opens from the menu button in the header.

<template>
  <docs-sidebar-nav :navigation="navigation" class="w-56" />
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const navigation: Array<ContentNavigationItem> = [
  {
    title: 'Guide',
    path: '/guide',
    children: [
      { title: 'Getting Started', path: '/guide/getting-started' },
      { title: 'Configuration', path: '/guide/configuration' },
    ],
  },
  {
    title: 'Components',
    path: '/components',
    children: [
      { title: 'Sidebar', path: '/components/sidebar' },
      { title: 'Sidebar Item', path: '/components/sidebar-item' },
      {
        title: 'Table of Contents',
        path: '/components/table-of-contents',
        badge: 'New',
      },
    ],
  },
]
</script>

Anatomy

The layer renders DocsSidebar beside every page. Its parts work on their own, so an override can reuse them.

Usage

DocsSidebarNav renders a navigation tree in the shape queryCollectionNavigation returns. useDocsNavigation reads the tree of the docs collection, with each page’s badge.

<template>
  <docs-sidebar-nav :navigation="navigation ?? []" />
</template>

<script setup lang="ts">
const { data: navigation } = await useDocsNavigation()
</script>

A section with pages renders as a group under its label. A page at the top level of content/ renders without a label. Every item whose path matches the route is marked as the current one.

Badges

A page with badge in its front matter shows the badge after its title in the sidebar.

---
title: Table of Contents
badge: New
---

Hiding the sidebar

A page that sets sidebar: false in its page meta takes the full width, and the header shows the menu button at every width. The landing page does this.

<script setup lang="ts">
definePageMeta({ sidebar: false })
</script>

API reference

DocsSidebar

Takes no props. To change the column itself, replace it with a component of the same name in your app.

DocsSidebarNav

DocsSidebarLinks

Takes no props. It lists docs.links from the app config, which starts with the Magic as a Service™ links. See Configuration.