Navigation

Librarian uses a three-level navigation architecture designed to scale to thousands of pages.

The Three Levels

1. Top Nav — Divisions

The top navigation bar (src/config/menu.en.json) contains the division links: Business, Customer, Engineering, Policies. These are simple links, not dropdowns. Clicking a division takes you to the first page in that division.

The Contribute button on the right links to this Librarian section.

2. Subnav — Departments

The horizontal bar below the top nav shows the departments within the current division. This is driven automatically from the sidebar data — whatever top-level groups exist within the active division appear here as tabs.

For example, when browsing Customer pages, the subnav shows: Marketing | Sales | Support

3. Left Sidebar — Pages

The left sidebar shows only the pages within the current department. It is filtered dynamically — when you’re in Customer → Marketing, you only see Marketing pages in the sidebar, not Sales or Support.

Configuration Files

src/config/sidebar.json

Defines the full content hierarchy. Structure:

{
  "main": [
    {
      "label": "Customer",
      "items": [
        { "label": "Marketing", "autogenerate": { "directory": "customer/marketing" } },
        { "label": "Sales", "autogenerate": { "directory": "customer/sales" } },
        { "label": "Support", "autogenerate": { "directory": "customer/support" } }
      ]
    }
  ]
}

Top-level entries in main are divisions. Their items are departments. Department items are pages.

autogenerate — all files in the directory appear automatically, sorted by filename.

slug — links to a specific page by its path relative to src/content/docs/.

src/config/menu.en.json

Defines the top nav links. Each entry has a name and url. Dropdown menus are supported via hasChildren and children but are not used for divisions.

Adding a New Department

1. Create the directory: src/content/docs/customer/partnerships/
2. Add at least one page: src/content/docs/customer/partnerships/overview.md
3. Add the department to sidebar.json under the correct division:

{ "label": "Partnerships", "autogenerate": { "directory": "customer/partnerships" } }

4. Restart the dev server.

Adding a New Division

1. Create the directory structure under src/content/docs/your-division/
2. Add the division to sidebar.json as a new top-level entry in main
3. Add a link to src/config/menu.en.json
4. Restart the dev server