Sidebar Configuration

The sidebar is configured via the sidebar prop on the <Layout> component in app/layout.jsx.

Collapse level

By default, the sidebar collapses folders at level 2. Set defaultMenuCollapseLevel to control this:

<Layout
  sidebar={{ defaultMenuCollapseLevel: 1 }}
  ...
>

This site uses defaultMenuCollapseLevel: 1 so every folder starts collapsed on load/refresh.

Auto-collapse

Set autoCollapse: true to automatically collapse folders that don’t contain the active page:

<Layout
  sidebar={{ defaultMenuCollapseLevel: 1, autoCollapse: true }}
  ...
>

With autoCollapse enabled, only the folder containing the current page stays open — all others collapse up to defaultMenuCollapseLevel.

Default open

Control whether the sidebar is visible on load with defaultOpen. Defaults to true.

<Layout
  sidebar={{ defaultOpen: false }}
  ...
>

Toggle button

The sidebar has a collapse/expand toggle button shown by default. You can hide it with toggleButton: false:

<Layout
  sidebar={{ toggleButton: false }}
  ...
>

Hide sidebar on a specific page

You can hide the sidebar on individual pages via _meta.js:

export default {
  'my-page': {
    theme: {
      sidebar: false
    }
  }
}

Custom sidebar title

By default, a page’s sidebar label comes from its _meta.js entry, then front matter title, then the first h1, then the filename. You can override it specifically for the sidebar using sidebarTitle in front matter:

---
sidebarTitle: Getting Started 🚀
---

The full priority order (highest to lowest) is:

1. sidebarTitle in front matter
2. title in front matter
3. First h1 heading
4. Title from _meta.js
5. Filename (formatted to title case)