Navigation

The header navigation bar is defined by topNav in docs/config.json. Without topNav, the header contains only the brand and search box.

{
  "topNav": [
    { "text": "Home", "link": "/" },
    { "text": "Guide", "link": "/guide/getting-started" },
    { "text": "Reference", "link": "/reference/" },
    {
      "text": "More",
      "items": [
        { "text": "GitHub", "link": "https://github.com/hawkinslabdev/bark" },
        { "text": "Releases", "link": "https://github.com/hawkinslabdev/bark/releases" }
      ]
    }
  ]
}

Item shapes ​

Each topNav entry has one of two shapes:

link defines a link; items (an array of the same shapes) defines a dropdown. An entry must not set both.

Links starting with http:// or https:// are external: they open in a new tab with rel="noopener noreferrer" and an external-link icon. Other links are normalized to absolute paths and participate in active-link highlighting.

Active state ​

A topNav link receives the active class when link matches the current path exactly. Dropdown triggers have no active state, including when a child matches.

Mobile ​

At 768px and below, the header navigation is hidden and its items render at the top of the sidebar drawer. Dropdowns render as native <details> disclosures and work without JavaScript. topNav configures both layouts.