Sidebar

Sidebar overview

The sidebar is a component which lists other pages in the same collection, so users can easily navigate through the related content. This is a standard pattern for documentation websites, but could be used to group any kind of content together.

All content in the collection is listed, ordered by frontmatter.date.

Enabling the sidebar

The sidebar can be opted in to on a per-collection basis.

To do so, the sidebarNav object needs to be present on the collection's config:

  {
    resolve: `gatsby-theme-golden-condor`,
    options: {
      collections: {
        pages: {
          sidebarNav: {
            heading: "Pages",
            width: 220
          }
        }
      }
    }
  }

  {
    resolve: `gatsby-theme-golden-condor`,
    options: {
      collections: {
        pages: {
          sidebarNav: {
            heading: "Pages",
            width: 220
          }
        }
      }
    }
  }

The above will enable a 300px wide sidebar with the heading Pages, on all entries under content/pages.

Add parent/child relationships via frontmatter

The sidebar supports a sub-level with togglable display of child entries. It also supports a sub-sub-level, which is further indented but doesn't have an expand/collapse toggle.

1. In the parent md(x) file, add an id field:

---
title: Parent Page
id: parent-page
---

---
title: Parent Page
id: parent-page
---

2. In the child md(x) files, add a parent field, with the parent's id value:

---
title: Child Page
parent: parent-page
---

---
title: Child Page
parent: parent-page
---

---
title: Another Child Page
parent: parent-page
---

---
title: Another Child Page
parent: parent-page
---

This would result in a sidebar with the following layout:

Create a heading without a page

To create a 'linkless' parent page, in the parent page's md(x) file, add a null path field.

---
title: Parent Page
id: parent-page
path: null
---

---
title: Parent Page
id: parent-page
path: null
---

The result of this is that this page isn't created by Gatsby at all. It will show in the sidebar with its title but it won't link to anything: