An alternate styleguide navigation for Pattern Lab Node ⚠️ 1.X Only
Switch branches/tags
Nothing to show
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.


An alternate styleguide navigation for

Pattern Lab Side Nav Example

Status & Compatibility

This alternate styleguide is still a work in progress.

It works for Pattern Lab Node and has yet to be tested with Pattern Lab PHP.


Assumes a fresh or stable install of Pattern Lab and all its dependencies.

  1. The simplest way to swap out the styleguide navigation is to completely replace the directory. Find the location of your current styleguide code.
  • As of Pattern Lab Node 1.1.0, this is defaulted to ./core/styleguide/, unless you remapped it using the paths object inside ./config.json
  • Prior versions housed styleguide/ directly in ./public/
  1. Overwrite the styleguide directory with the styleguide/ directory from this repository
  2. Find ./source/_patternlab-files/index.mustache and overwrite it with the contents of index.mustache in this repository.
  3. Optionally: If you'd like your logo displayed above the navigation like the screenshot shows, do the following:
  • Find ./source/_patternlab-files/partials/patternNav.mustache

  • Add the following block after line 1, just inside <ol class="sg-nav">:

     <img src="" style="margin: 0 auto; display: block; height: 2em; padding: 5px;" alt="Styleguide logo"/>
  • Add your logo url and style as needed.

  • If you like, move <li><a href="styleguide/html/styleguide.html" class="sg-pop" data-patternpartial="all">All</a></li> after your logo entry, or make the logo your link to all patterns.

    • Something like:

        <a href="styleguide/html/styleguide.html" class="sg-pop" data-patternpartial="all">
          <img src="" style="margin: 0 auto; display: block; height: 2em;"/>