Sidebar and Navigation

Docstra provides an automated yet flexible navigation system that makes organizing your documentation effortless.

Auto-Generated Sidebar

By default, Docstra generates the sidebar based on the file structure of your content directory. This means your URLs and navigation hierarchy are always in sync.

Sorting and Naming

To control the order and display names of your sidebar items, you can use prefixes in your filenames:

• Naming: The filename (minus the prefix and extension) is used as the slug. The title property in the page's frontmatter is used as the display name.
• Sorting: Use numeric prefixes (e.g., 01-intro.mdx, 02-setup.mdx) to define a specific order. These prefixes are automatically stripped from the final URL.

Nested Navigation

Folders in your content directory translate into nested sections in the sidebar.

File Structure
content/
  01-index.mdx             -> /docs
  02-features/
    01-search.mdx          -> /docs/features/search
    02-components.mdx      -> /docs/features/components

Customizing Sidebar

Sidebar Metadata Reference

Example Usage (MDX Frontmatter)

mdx
---
title: My Page
nav_title: Custom Sidebar Name
icon: NotebookPen
description: My Custom Description
defaultOpen: true
collapsible: false
group_title: My Group Title
---

How It Works (Hierarchy Logic)

• title → fallback display everywhere
• nav_title → overrides sidebar label only
• group_title → applies to folders (sections)
• icon → rendered alongside sidebar item
• defaultOpen → controls initial expand state
• collapsible → locks/unlocks collapse behavior

Pro Tips (Important)

• Use nav_title when:

  • filename is technical but UI should be user-friendly

• Use group_title when:

  • folder name ≠ desired sidebar label

• Combine defaultOpen + collapsible=false:

  • for always-visible important sections

Breadcrumbs

Docstra automatically generates breadcrumb navigation at the top of each page, helping users understand their current location within the documentation hierarchy.

Table of Contents (TOC)

On the right side of each page, a Table of Contents is automatically generated based on the headings (h2 and h3) in your MDX content. It supports:

• Active State: Highlights the section currently in view as the user scrolls.
• Deep Linking: Clickable links that scroll the page to the corresponding section.

Last updated on March 30, 2026