Reference
/Sidebar
Sidebar
Sidebar configuration
Properties
groupstringpagestringtitlestringpagesarray of PageURLSourcePageSourcePagepagestringRequiredsourcestringRequiredtitlestringcontextControlsContextControlsSidebarSidebargroupstringpagestringtitlestringpagesarray of PageURLiconstringexpandedbooleanorderOrderasTocSidebarAsTocOptionsSidebarAsTocOptionsindicatorbooleanbreadcrumbsbooleanbooleanbooleanComponentPageComponentPagefixedbooleancomponentRequiredComponentPageImportComponentPageImportimportstringRequiredpropsRecord<string, any>stringstringstringstringVirtualPageVirtualPageiconstringexpandedbooleanorderOrderasTocSidebarAsTocOptionsSidebarAsTocOptionsindicatorbooleanbreadcrumbsbooleanbooleanboolean
The name of the group
Makes the group itself a real page (the "Group Page" feature). When set, the
group resolves to this route — so it becomes a clickable breadcrumb
automatically. (Clickable group headers in the sidebar are still Coming Soon.)
Label for a entry — a page reference with no group and no
pages . It overrides the page's frontmatter title, and is the only way to label a route that has no markdown behind it, such as a generated API reference: without it the sidebar row renders blank.
Page URL type
A page whose URL differs from its markdown file path.
Sugar for the
VirtualPage
object form — normalized at boot
(
`{ page, source }`
→
`{ virtual: source, page }`
), so the whole engine
only ever sees the virtual shape. Use it when several files should share a
URL scheme, e.g. per-framework variants:
```json
{ "page": "docs/angular/logs", "source": "docs/logs.angular" }
{ "page": "docs/bun/logs", "source": "docs/logs.bun" }
```
The URL the page serves at.
The markdown file path, extension-less — like a string page entry
(
`docs/logs.angular`
→
`docs/logs.angular.md`
/
`.mdx`
).
Optional sidebar label override.
Page context controls for THIS page (replaces the global set).
Sidebar configuration
The name of the group
Makes the group itself a real page (the "Group Page" feature). When set, the
group resolves to this route — so it becomes a clickable breadcrumb
automatically. (Clickable group headers in the sidebar are still Coming Soon.)
Label for a
`{ page, title }`
entry — a page reference with no
`group`
and no
`pages`
. It overrides the page's frontmatter title, and is the only way to
label a route that has no markdown behind it, such as a generated API
reference: without it the sidebar row renders blank.
The relative paths to the markdown files that will serve as pages.
Note: groups are recursive, so to add a sub-folder add another group object in the page array.
The icon of the group.
Open this group on load, even when the reader is on a page outside it.
Sets the INITIAL state only — it is a default, not a lock: the group still
opens by itself when it holds the active page, and a reader who collapses
it keeps it collapsed for as long as they stay on the page (like the rest
of the sidebar's open state, it starts over on the next one).
Only meaningful for a nested group — top-level groups are always open.
The order of the group.
Treat this group's pages as a table of contents instead of real pages.
Their markdown files are NOT routable (no routes, no prerender) — the
content of every page is injected as a section into the enclosing route's
index page, sidebar items scroll to those sections (with scroll-spy active
marking), and the right-hand TOC is hidden on that composed page.
`true`
enables it with defaults; the object form tunes behaviors
(all default to enabled).
Behavior options for an
`asToc`
sidebar group (the object form).
Every option defaults to
`true`
—
`asToc: true`
≡
`asToc: {}`
.
TOC-style visual indicator on the group's sidebar items (the vertical
track line the right-hand TOC uses). Default
`true`
.
Breadcrumbs on the composed host page that follow the section being
read (group name / section title, updated by scroll). Default
`true`
.
A custom React component rendered AS a sidebar item.
`component`
is a path (relative to the docs project, e.g.
`"./components/TryNewVersion"`
) to a module whose DEFAULT export is a function
component. It renders inside the framework context, so it may use
`@xyd-js/framework/react`
hooks;
`props`
are passed to it.
`fixed: true`
pins it
in the sidebar's fixed region (above the scrollable list).
Pin this item in the sidebar's fixed region (stays visible on scroll).
A path to a default-export React component (relative to the docs project),
or an object with that path under
`import`
plus
`props`
for the component.
Object form of
`ComponentPage.component`
: an import path plus optional props.
Path to a default-export React component, relative to the docs project.
Props passed to the component.
The icon of the group.
Open this group on load, even when the reader is on a page outside it.
Sets the INITIAL state only — it is a default, not a lock: the group still
opens by itself when it holds the active page, and a reader who collapses
it keeps it collapsed for as long as they stay on the page (like the rest
of the sidebar's open state, it starts over on the next one).
Only meaningful for a nested group — top-level groups are always open.
The order of the group.
Treat this group's pages as a table of contents instead of real pages. Their markdown files are NOT routable (no routes, no prerender) — the content of every page is injected as a section into the enclosing route's index page, sidebar items scroll to those sections (with scroll-spy active marking), and the right-hand TOC is hidden on that composed page.
true enables it with defaults; the object form tunes behaviors (all default to enabled).
Behavior options for an asToc sidebar group (the object form). Every option defaults to true — asToc: true ≡ asToc: .
TOC-style visual indicator on the group's sidebar items (the vertical track line the right-hand TOC uses). Default true .
Breadcrumbs on the composed host page that follow the section being read (group name / section title, updated by scroll). Default true .
Built with
Show your support! Star us on GitHub ⭐️