Skip to content
No description, website, or topics provided.
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Gatsby Theme Docbar

Still in development

Quickly add a documentation page to your website with a collapsible sidebar for organising your content.

See the live demo


To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme
npm install --save gatsby-theme-docbar
  1. Install react-collaspible
npm install --save react-collapsible

Currently this theme has a dependency on react-collapsible to handle collapsing elements in sidebar.

  1. Add the theme to your gatsby-config.js
module.exports = {
  plugins: [
  1. Start your site
gatsby develop


By default Gatsby Theme Docbar looks for Markdown content in a content directory at the route of your project. It will also create a page for documentation at /.

You can however configure these values, to do so follow these instructions:

Update content location

The content location is where the files you want to render within your site lives. Currently only Markdown files are supported.

  1. Provide a custom contentPath
module.exports = {
  plugins: [
      resolve: "gatsby-theme-docbar",
      options: {
        contentPath: "content/docs/",
  1. Restart your site
gatsby develop

Update base path

The base path is the path that enters the documentation page, for many sites this lives on /learn or /docs. The default value is /.

  1. Provide a custom path
module.exports = {
  plugins: [
      resolve: "gatsby-theme-docbar",
      options: {
        basePath: "/learn",
  1. Restart your site
gatsby develop


Add own header/footer

To change the default header and footer provided by Gatsby Theme Docbar you use shadowing to replace them, follow these instructions to see how:

  1. Create a new file in your site at: src/gatsby-theme-docbar/components/header/index.js

  2. Likewise do the same for your footer: src/gatsby-theme-docbar/components/footer/index.js

  3. Add the code for each component to their respective files.

For shadowing to work correctly the path needs to match the ones provided above.

Change css of page

Currently Gatsby Theme Docbar uses css modules for styling and relies on shadowing if you want to overwrite the styles with your own custom styling. To add your own styling, follow these instructions:

  1. Add a new css file in your site at src/gatsby-theme-docbar/components/styles/sidebar.module.css

  2. Copy in this template:

.sidebar {
  background-color: #FAF8F8;
  width: 25%;
  min-height: calc(100vh - 130px);
  font-family: Arial;
  box-shadow: 1px 0 1px #dedede;

.sidebar-heading {
  font-size: 1.2rem;
  padding: 0.2rem;
  margin-top: 1.4rem;
  width: max-content;

.sidebar-heading:hover {
  cursor: pointer;

.sidebar-subheading {
  font-size: 1rem;
  margin-top: 0.8rem;

.sidebar-list {
  list-style-type: none;

.sidebar-link {
  text-decoration: none;
  color: #535353;

.sidebar-link:hover {
  color: #0096F4;

.sidebar-active-link {
  color: #0096F4;
  font-weight: 500;
  1. Change the defaults to whatever you need for your site.

This is a temporary solution, in future releases I'd like to see this project move to using Theme UI.

Future Work

  1. Move to using Theme UI for styling

  2. Allow other data sources to be provided, local Markdown is currently only supported

  3. Allow more configuration options, such as only one section expanded at a time.

  4. Potentially remove dependency on react-collapsible

For an exhaustive list of what is coming soon, see the issues page.

You can’t perform that action at this time.