Sidebar
The sidebar is auto-generated from your file structure. Customize its appearance through config.
Custom Title
The sidebar title supports strings or React components:
nav: {
title: (
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<Rocket size={14} />
<span>My Docs</span>
</div>
),
url: "/docs",
},Icons
Add icons to sidebar items via frontmatter:
---
title: "Getting Started"
icon: "rocket"
---Register icons in your config:
icons: {
rocket: <Rocket size={16} />,
book: <BookOpen size={16} />,
},Collapsible Groups
Nested directories automatically become collapsible groups. A directory with its own page.mdx becomes a folder with an index page:
app/docs/
plugins/
page.mdx # Folder index (clickable)
organizations/
page.mdx # Child page
two-factor/
page.mdx # Child pageSidebar Style
theme: pixelBorder({
ui: {
sidebar: { style: "floating" },
},
}),Breadcrumbs
Enable breadcrumb navigation:
breadcrumb: { enabled: true },Shows Parent / Current Page with the parent being clickable.