diff --git a/ui/app/styles/core/menu.scss b/ui/app/styles/core/menu.scss
index 06fd74a56..0811337af 100644
--- a/ui/app/styles/core/menu.scss
+++ b/ui/app/styles/core/menu.scss
@@ -13,6 +13,15 @@
         background: transparent;
         box-shadow: inset -3px 0 0 $blue;
         color: $blue;
+
+        .icon {
+          fill: $blue;
+        }
+      }
+
+      .icon {
+        margin-right: 0.5em;
+        fill: lighten($text, 30%);
       }
     }
 
diff --git a/ui/app/styles/styleguide.scss b/ui/app/styles/styleguide.scss
index f77df0655..3b0a21785 100644
--- a/ui/app/styles/styleguide.scss
+++ b/ui/app/styles/styleguide.scss
@@ -1,7 +1,8 @@
 #styleguide {
   .mock-content {
     display: flex;
-    height: 250px;
+    min-height: 250px;
+    height: 100%;
 
     .mock-image,
     .mock-copy {
@@ -40,5 +41,11 @@
         transparent 14px
       );
     }
+
+    .mock-vague {
+      background: lighten($grey-blue, 15%);
+      width: 100%;
+      height: 100%;
+    }
   }
 }
diff --git a/ui/app/templates/components/freestyle/sg-gutter-menu.hbs b/ui/app/templates/components/freestyle/sg-gutter-menu.hbs
new file mode 100644
index 000000000..8ccc3e759
--- /dev/null
+++ b/ui/app/templates/components/freestyle/sg-gutter-menu.hbs
@@ -0,0 +1,156 @@
+{{#freestyle-usage "gutter-nav" title="Gutter Menu"}}
+  <div class="columns">
+    <div class="column is-4">
+      <div class="gutter">
+        <aside class="menu">
+          <p class="menu-label">Places</p>
+          <ul class="menu-list">
+            <li><a href="#" class="is-active">Place One</a></li>
+            <li><a href="#">Place Two</a></li>
+          </ul>
+
+          <p class="menu-label">Features</p>
+          <ul class="menu-list">
+            <li><a href="#">Feature One</a></li>
+            <li><a href="#">Feature Two</a></li>
+          </ul>
+        </aside>
+      </div>
+    </div>
+    <div class="column">
+      <div class="mock-content">
+        <div class="mock-vague"></div>
+      </div>
+    </div>
+  </div>
+{{/freestyle-usage}}
+
+{{#freestyle-usage "gutter-nav-rich-components" title="Gutter Navigation with Rich Components"}}
+  <div class="columns">
+    <div class="column is-4">
+      <div class="gutter">
+        <aside class="menu">
+          <p class="menu-label">Places</p>
+          <ul class="menu-list">
+            <li>
+              <div class="menu-item">
+                {{#power-select
+                  selected=(or selection "One")
+                  options=(array "One" "Two" "Three")
+                  onchange=(action (mut selection))
+                  as |option|}}
+                  {{option}}
+                {{/power-select}}
+              </div>
+            </li>
+            <li><a href="#" class="is-active">Place One</a></li>
+            <li><a href="#">Place Two</a></li>
+          </ul>
+
+          <p class="menu-label">Features</p>
+          <ul class="menu-list">
+            <li><a href="#">Feature One</a></li>
+            <li><a href="#">Feature Two</a></li>
+          </ul>
+        </aside>
+      </div>
+    </div>
+    <div class="column">
+      <div class="mock-content">
+        <div class="mock-vague"></div>
+      </div>
+    </div>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  In order to keep the gutter navigation streamlined and easy to navigation, rich components should be avoided when possible. When not possible, they should be kept near the top.
+{{/freestyle-annotation}}
+
+{{#freestyle-usage "gutter-nav-many-items" title="Hypothetical Gutter Navigation with Many Items"}}
+  <div class="columns">
+    <div class="column is-4">
+      <div class="gutter">
+        <aside class="menu">
+          <p class="menu-label">Places</p>
+          <ul class="menu-list">
+            {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
+              <li><a href="#">Place {{item}}</a></li>
+            {{/each}}
+          </ul>
+
+          <p class="menu-label">Features</p>
+          <ul class="menu-list">
+            {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
+              <li><a href="#">Feature {{item}}</a></li>
+            {{/each}}
+          </ul>
+
+          <p class="menu-label">Other</p>
+          <ul class="menu-list">
+            <li><a href="#" class="is-active">The one that didn't fit in</a></li>
+          </ul>
+
+          <p class="menu-label">Things</p>
+          <ul class="menu-list">
+            {{#each (array "One Two" "Three" "Four" "Five" "Six" "Seven") as |item|}}
+              <li><a href="#">Thing {{item}}</a></li>
+            {{/each}}
+          </ul>
+        </aside>
+      </div>
+    </div>
+    <div class="column">
+      <div class="mock-content">
+        <div class="mock-vague"></div>
+      </div>
+    </div>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  There will only ever be one gutter menu in the Nomad UI, but it helps to imagine a situation where there are many navigation items in the gutter.
+{{/freestyle-annotation}}
+
+{{#freestyle-usage "gutter-nav-icon-items" title="Hypothetical Gutter Navigation with Icon Items"}}
+  <div class="columns">
+    <div class="column is-4">
+      <div class="gutter">
+        <aside class="menu">
+          <p class="menu-label">Places</p>
+          <ul class="menu-list">
+            <li><a href="#">{{x-icon "clock"}} Place One</a></li>
+            <li><a href="#" class="is-active">{{x-icon "history"}} Place Two</a></li>
+          </ul>
+
+          <p class="menu-label">Features</p>
+          <ul class="menu-list">
+            <li><a href="#">{{x-icon "warning"}} Feature One</a></li>
+            <li><a href="#">{{x-icon "media-pause"}} Feature Two</a></li>
+          </ul>
+        </aside>
+      </div>
+    </div>
+    <div class="column">
+      <div class="mock-content">
+        <div class="mock-vague"></div>
+      </div>
+    </div>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  In the future, the gutter menu may have icons.
+{{/freestyle-annotation}}
+
+{{#freestyle-usage "gutter-nav-global" title="Global Gutter Navigation"}}
+  <div class="columns">
+    <div class="column is-4">
+      {{#gutter-menu}}
+        {{!-- Page content here --}}
+      {{/gutter-menu}}
+    </div>
+  </div>
+{{/freestyle-usage}}
+{{#freestyle-annotation}}
+  <p>Since there will only ever be one gutter menu in the UI, it makes sense to express the menu as a singleton component. This is what that singleton component looks like.</p>
+
+  <p><strong>Note:</strong> Normally the gutter menu is rendered within a page layout and is fixed position. The columns shown in this example are only to imitate the actual width without applying fixed positioning.</p>
+{{/freestyle-annotation}}
diff --git a/ui/app/templates/freestyle.hbs b/ui/app/templates/freestyle.hbs
index 387befe99..5b2001a06 100644
--- a/ui/app/templates/freestyle.hbs
+++ b/ui/app/templates/freestyle.hbs
@@ -36,8 +36,10 @@
         {{freestyle/sg-dropdown}}
       {{/section.subsection}}
 
-      {{#section.subsection name="Gutter navigation"}}
+      {{#section.subsection name="Gutter menu"}}
+        {{freestyle/sg-gutter-menu}}
       {{/section.subsection}}
+
       {{#section.subsection name="Header"}}
       {{/section.subsection}}
       {{#section.subsection name="Inline definitions"}}