Sidebar

Introduction

Pass sidebar option to theme default to configure sidebar. There are two ways to set up the sidebar:

  • Auto-generated — Automatically scan your routes directory and build the sidebar from your file structure and frontmatter
  • Manual — Explicitly define every sidebar item in your Vite config

Auto-generated sidebar

Set sidebar to { enabled: true } to let SveltePress automatically generate the sidebar by scanning your src/routes/ directory.

import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : {
          : true,
        },
      }),
    }),
  ],
})
ts

SveltePress will detect top-level route directories (e.g. /guide/, /reference/) and build sidebar groups from them automatically.

Options

OptionTypeDefaultDescription
enabledboolean—Set to true to enable auto sidebar
routesDirstring'src/routes'Custom routes directory path
rootsstring[]auto-detectedRoot paths to generate sidebar for, e.g. ['/guide/', '/reference/']. If not specified, auto-detect from top-level route directories
sidebar: {
  enabled: true,
  routesDir: 'src/routes',
  roots: ['/guide/', '/reference/'],
}
txt

Frontmatter control

Use frontmatter in your +page.md files to control how pages appear in the auto-generated sidebar.

---
title: Getting Started
order: 1
sidebar: true
sidebarTitle: Start Here
collapsible: true
---
md
FieldTypeDefaultDescription
titlestringInferred from filenamePage title, also used as sidebar label
sidebarTitlestring—Override the sidebar label (takes precedence over title)
ordernumber100Sort order within the same level. Lower numbers appear first
sidebarbooleantrueSet to false to exclude this page from the sidebar
collapsibleboolean—Whether the sidebar group is collapsible
File naming

If no title or sidebarTitle is provided, the directory name is humanized (e.g. getting-started → Getting Started).

HMR support

When using auto sidebar in dev mode, adding or removing route files will automatically regenerate the sidebar — no restart needed.

Manual sidebar

Manually define the sidebar structure in your Vite config. This gives you full control over titles, links, grouping, and ordering.

Auto base

The links configured will be auto prefixed with base

Absolute mode

You need to set paths.relative to false

svelte.config.js
+
import adapter from '@sveltejs/adapter-static'

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    paths: {
      relative: false, 
    },
  },
}

export default config
js
import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : ({
        : {
          '/foo/': [
            {
              : 'Bar',
              : '/foo/bar/',
            },
            {
              : 'Zoo',
              : true,
              : [
                {
                  : 'Sub item',
                  : '/sub/item/link',
                },
              ],
            },
            {
              : 'External github page',
              : 'https://github.com',
            },
          ],
        },
      }),
    }),
  ],
})
ts

title

The sidebar item title

to

The link address

Auto external

Unlike the navbar item, sidebar item use the Link component. Which means link starts with http(s) would be auto recognized as external links.

collapsible

Determine whether the sidebar group is collapsible or not. Default is false

items

Sub items

Nested items

Nested items is supported

Suggest changes to this page
Last update at: 2026/03/19 07:24:06