Sidebar

Bark builds the left sidebar one of three ways, in priority order:

1. sidebar in config.json, matched by path prefix. Highest priority.
2. nav in config.json, one flat tree shared by every page. Used only when no sidebar prefix matches.
3. Your folder structure, auto-generated. Used when neither sidebar nor nav is set.

Most projects start with option 3 and graduate to option 1 once they have more than one logical section (a guide and a reference, for example).

Multi-sidebar config ​

{
  "sidebar": {
    "/guide/": [
      {
        "title": "Introduction",
        "collapsed": false,
        "items": [
          { "title": "Getting Started", "path": "guide/getting-started" },
          { "title": "Configuration", "path": "guide/configuration" }
        ]
      }
    ],
    "/reference/": [
      {
        "title": "Reference",
        "items": [
          { "title": "Site Config", "path": "reference/site-config" }
        ]
      }
    ]
  }
}

Each key is a path prefix. Bark picks whichever key is the longest match for the page you're viewing, so /guide/ and /guide/advanced/ can both exist, the more specific one winning for pages under it. An empty-string key ("" or /) acts as a catch-all for anything not matched by a more specific prefix.

Entries ​

Every entry in a sidebar array is either a link or a group, and groups nest to any depth:

If you leave the title off a group, its links render together as one heading-less cluster. You can read more about this in Grouping links without a heading further down.

External links ​

A path starting with http:// or https:// is treated as an external link rather than a docs page:

{
  "sidebar": {
    "": [
      {
        "title": "Resources",
        "items": [
          { "title": "Getting Started", "path": "guide/getting-started" },
          { "title": "Source on GitHub", "path": "https://github.com/melosso/bark" }
        ]
      }
    ]
  }
}

External entries render with an outbound arrow and open in a new tab (target="_blank", rel="noopener noreferrer"), the same as external top-nav items. They are never highlighted as the active page, never auto-expand their group, and are skipped by prev/next pagination since they aren't pages in your docs.

Only http and https are recognised. Any other value is treated as a docs page path.

Collapse behavior ​

collapsed controls whether a group gets a toggle caret and what state it starts in:

A group containing the page you're currently on always renders expanded. Collapsing is implemented with native <details>/<summary>, so it works with JavaScript disabled and doesn't need any client-side state.

Grouping links without a heading ​

Sometimes you have a handful of standalone links that belong together, yet none of them really calls for a section heading above it. Rather than leaving them as separate top-level links, where each one sits on its own under a divider, you can gather them into a group and simply leave the title off. Bark then renders the links as one tight cluster, quietly skipping the uppercase heading that a titled group would show.

{
  "sidebar": {
    "": [
      {
        "items": [
          { "title": "Config & API Reference", "path": "reference/site-config" },
          { "title": "Changelog", "path": "more/changelog" }
        ]
      }
    ]
  }
}

This is convenient for a closing set of reference or housekeeping links at the bottom of a guide sidebar. The cluster is still set apart from the section above it by a gentle divider, so your grouping stays clear without adding extra visual weight. A heading-less group is always expanded and is not collapsible, since there is no title to click.