Header Navigation

Configure top-level navigation tabs in the header

zudo-doc supports a three-level navigation hierarchy inspired by Docusaurus:

• Header nav — top-level tabs in the site header (biggest categories)
• Sidebar categories — collapsible groups in the sidebar (2nd level)
• Sidebar items — individual pages within categories (3rd level)

Configuration

Define header navigation items in src/config/settings.ts:

export const settings = {
  // ...
  headerNav: [
    { label: "Getting Started", labelKey: "nav.gettingStarted", path: "/docs/getting-started", categoryMatch: "getting-started" },
    { label: "Guides", labelKey: "nav.guides", path: "/docs/guides", categoryMatch: "guides" },
    { label: "Reference", labelKey: "nav.reference", path: "/docs/reference", categoryMatch: "reference" },
  ],
};

Each item supports the following properties:

labelKey

The labelKey property enables localized header navigation labels. When set, zudo-doc looks up the key in the current locale’s translation file and uses the translated string instead of label. If no translation is found, label is used as a fallback.

Translation keys follow the nav.* namespace convention (e.g., "nav.gettingStarted", "nav.guides").

categoryMatch

The categoryMatch property connects a header tab to a specific sidebar category. When a header tab with categoryMatch is active, the sidebar filters to show only the pages within that category.

For example, categoryMatch: "guides" links the tab to the guides/ content directory. When a user navigates to any page under /docs/guides/, the “Guides” tab becomes active and the sidebar shows only the guides category.

Active State

A header nav item is considered active when the current page URL starts with the item’s path. For example, visiting /docs/guides/configuration activates the “Guides” tab because the URL starts with /docs/guides.

Mobile Behavior

On small screens (< 640px), header nav items are hidden to save space. The sidebar toggle provides access to all navigation on mobile.