Skip to main content
SolidBase

Sidebar

since 0.0.9Source

The sidebar for the default theme is configured in the app config:

app.config.ts
import { defineConfig } from "@solidjs/start/config";
import { createSolidBase } from "@kobalte/solidbase";
const solidBase = createSolidBase(theme);
export default defineConfig({
...solidBase.startConfig({
...
}),
plugins: [
solidBase.plugin({
...
themeConfig: {
...
sidebar: {
"/guide": {
items: [
{
title: "Overview",
collapsed: false,
items: [
{
title: "What is SolidBase?",
link: "/",
},
{
title: "Getting Started",
link: "/getting-started",
},
...
],
},
{
title: "Features",
collapsed: false,
items: [
{
title: "Markdown Extensions",
link: "/markdown",
},
...
],
},
...
],
},
"/reference": {
items: [
{
title: "Reference",
collapsed: false,
items: [
{
title: "Frontmatter Config",
link: "/frontmatter",
},
],
},
{
title: "Default Theme",
collapsed: false,
items: [
{
title: "Overview",
link: "/default-theme",
},
...
],
},
],
},
},
},
...
}),
],
});

When routes.project is configured with multiple available project options, the default theme renders ProjectSelector above the sidebar links. The selector navigates to the selected project's route root and only appears when more than one project option is available.

Last updated: 4/22/26, 9:58 PM

SolidBaseFully featured, fully customisable static site generation for SolidStart
Community
githubdiscord