Advanced Navigation
Simple Page supports two advanced navigation features:
- A Table of Contents (ToC) sidebar on the right.
- A Navigation Sidebar on the left.
Both sidebars:
- Collapse into a button on mobile.
- Expand by default on desktop (if there is enough space).
- This page has both sidebars enabled, so you can see how they work
📑 Table of Contents (Right Sidebar)
The Table of Contents (ToC) shows an outline of the current page, generated from Markdown headers (#, ##, ###, etc.).
This helps readers quickly jump between sections in long documents.
Enable it by adding this to the page frontmatter:
sidebar-toc: true
Example
Markdown file:
# API
## Authentication
### Sign In
### Sign Out
## Endpoints
### GET /posts
### POST /posts
ToC sidebar:
API
├─ Authentication
│ ├─ Sign In
│ └─ Sign Out
└─ Endpoints
├─ GET /posts
└─ POST /posts
🧠Navigation Sidebar (Left Sidebar)
The Navigation Sidebar shows links to different pages in your site.
It reflects the folder structure of your content and can be ordered using priority values.
Enable it by adding this to the page frontmatter:
sidebar-nav-prio: <number>
How Priorities Work
Lower numbers appear higher in the sidebar.
Priorities are only compared within the same category.
Categories are based on the folder path.
/category/page-name/→ grouped under category./category/sub-category/page-name/→ grouped under sub-category (collapsed until clicked).
Categories without Pages
- Top-level categories will be clickable if they have a page.
Example:/category/is a page, and/category/page1,/category/page2are subpages. - You can make categories not clickable (only a title with subpages) by simply not creating the
/category/page.
📂 Folder Structure → Sidebar Example
Folder Structure
/architecture/api/ (sidebar-nav-prio: 10)
/architecture/components/ (sidebar-nav-prio: 20)
/architecture/components/node (sidebar-nav-prio: 1)
/architecture/components/frontend (sidebar-nav-prio: 2)
/architecture/design-principles/ (sidebar-nav-prio: 30)
Left Sidebar
Architecture
├─ API (prio: 10)
├─ Components (prio: 20)
│ ├─ Frontend (prio: 1)
│ └─ Node (prio: 2)
└─ Design Principles (prio: 30)
(Lower numbers = higher placement in sidebar)
Putting It All Together
Think of the two sidebars like this:
[ Left Sidebar ] (site structure) [ Right Sidebar ] (page structure)
Architecture API
├─ API ├─ Authentication
├─ Components │ ├─ Sign In
└─ Design Principles │ └─ Sign Out
└─ Endpoints
├─ GET /posts
└─ POST /posts
- Left Sidebar = how pages are organized across your site.
- Right Sidebar = how sections are organized within a single page.