Awesome Open Source
Awesome Open Source


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;"/>

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,072,185
Navigation (8,843
Styleguide (2,679
Pattern Lab (185