Sidebar Config
The sidebar in Pathfinder is configured through localized TypeScript files that define the structure and order of your documentation tabs and their sections.
Configuration Files
The sidebar navigation is configured in src/docs/config/[language]/sidebarNavData.json.ts
. Each language file exports a default object containing documentation tabs and their sections.
export default { // Define the tabs that appear at the top of the sidebar tabs: [ { id: "main", title: "Documentation", description: "Main documentation", icon: "tabler/file-text", // Optional icon from astro-icon // Define sections that appear in this tab sections: [ { id: "getting-started", title: "Getting Started", }, { id: "components", title: "Components", }, { id: "reference", title: "Reference", }, ], }, { id: "api", title: "API", description: "API Reference", icon: "tabler/api-app", sections: [ { id: "endpoints", title: "Endpoints", }, { id: "authentication", title: "Authentication", }, ], }, ],};
Info
Any sections not configured are still included, they will just have their default label and alphabetical display order.
Structure Overview
The sidebar configuration consists of:
Documentation Tabs - These appear at the top of the sidebar and allow users to switch between different documentation sections (like “Documentation” and “API”).
Sidebar Sections - These are the sections that appear within each documentation tab, representing folders of related documentation pages.
Documentation Tab Properties
Each tab in the tabs
array has the following properties:
id
(required): The unique identifier for this documentation tab.title
(required): The display title for the tab in the sidebar navigation.description
(optional): A short description of the tab’s contents.icon
(optional): An icon from the astro-icon set to display next to the tab title.sections
(required): An array of sidebar sections that belong to this tab.
Sidebar Section Properties
Each section in a tab’s sections
array has the following properties:
id
(required): Must match the folder name undersrc/docs/data/docs/[language]/
. For example, if your id is “getting-started”, your documentation files should be insrc/docs/data/docs/[language]/getting-started/
.title
(required): The display title for the section in the sidebar navigation. This can include spaces and special characters.
Ordering and Organization
- The order of tabs in the
tabs
array determines their display order in the sidebar’s tab selector. - The order of sections in each tab’s
sections
array determines their display order within that tab. - When a user selects a tab, the sidebar will display the sections for that tab in the order defined in the configuration.
Adding New Tabs and Sections
To add a new documentation tab:
- Add a new tab configuration to the
tabs
array with a uniqueid
- Define the sections that should appear in this tab
To add a new section to an existing tab:
- Create a new folder under
src/docs/data/docs/[language]/
with your section’s ID - Add a new section configuration to the appropriate tab’s
sections
array - Add your documentation files (
.md
or.mdx
) to your new section folder
export default { tabs: [ { id: "main", title: "Documentation", // ... other properties ... sections: [ // ... existing sections ... { id: "advanced-topics", title: "Advanced Topics", }, ], }, ],};
Localization
The sidebar navigation is fully localizable. Create a separate configuration file for each language (this is automated if you run the docs:config-i18n
command):
src/docs/config/en/sidebarNavData.json.ts
for Englishsrc/docs/config/fr/sidebarNavData.json.ts
for French- etc.
Each language can have its own translated titles, descriptions, and even different ordering of tabs and sections if needed.