Beacon

Configuring the Sidebar

Control sidebar groups, their order, and how pages are labeled.

The sidebar builds itself from your docs, but you decide the order of groups and the top navigation. Both live in src/config/site.ts.

Group order

Each doc declares a group in its frontmatter. The order those groups render in the sidebar comes from SIDEBAR_GROUPS:

// src/config/site.ts
export const SIDEBAR_GROUPS: string[] = [
  "Getting Started",
  "Guides",
  "Reference",
];

Groups listed here render in this exact order. A doc whose group isn’t in the list still renders — it just appears after the listed groups, alphabetically. To add a section, add its name to the array and tag your docs with it.

Item order within a group

Inside a group, pages sort by their order field (lowest first), then by title as a tiebreaker:

---
title: Authentication
group: Guides
order: 1   # appears above order: 2
---

Top navigation

The header nav is a separate, hand-curated list — keep it short:

// src/config/site.ts
export const NAV = [
  { label: "Docs", href: "/docs/introduction" },
  { label: "Changelog", href: "/changelog" },
  { label: "GitHub", href: SITE.repo },
];

External links (anything not starting with /) automatically open in a new tab.

Custom sidebar labels

If a page title is long, set a shorter sidebar label without changing the <h1>:

---
title: Configuring the Sidebar
sidebar: Sidebar & Nav
---

That’s the entire navigation model — two arrays and a frontmatter field.