Add .is-active class to Menu, closes #8040

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index b7db36a52be6b6d8d6b54f79cf3e25c065ac1795..e97399f6e1d8e05e6505279a620d53b50b63f041 100644 (file)
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -130,6 +130,20 @@ Add a new menu inside the `<li>` of a Menu and add the class `.nested` to create
 
 ---
 
+## Active State
+
+Add the class `.is-active` to any `<li>` to create an active state. You could apply this server-side to mark the active page, or dynamically with JavaScript.
+
+```html_example
+<ul class="menu">
+  <li class="is-active"><a>Home</a></li>
+  <li><a>About</a></li>
+  <li><a>Nachos</a></li>
+</ul>
+```
+
+---
+
 ## Icons
 
 Menu items can have icons. Wrap the text of the item in a `<span>`, and then add an `<img>` element before the `<span>`. If you're using the Foundation icon font, the `<img>` will be an `<i>` instead.

diff --git a/scss/components/_menu.scss b/scss/components/_menu.scss
index d5277cd9089a7ae104ea5c319a7cd310d7fe4280..b59d7203f18a63eab02b957ef998dbbb4a2ba971 100644 (file)
--- a/scss/components/_menu.scss
+++ b/scss/components/_menu.scss
@@ -18,6 +18,14 @@ $menu-margin-nested: 1rem !default;
 /// @type Number
 $menu-item-padding: 0.7rem 1rem !default;
 
+/// Text color of an active menu item.
+/// @type Color
+$menu-item-color-active: $white !default;
+
+/// Background color of an active menu item.
+/// @type Color
+$menu-item-background-active: map-get($foundation-palette, primary) !default;
+
 /// Spacing between an icon and text in a menu item.
 /// @type Number
 $menu-icon-spacing: 0.25rem !default;
@@ -250,6 +258,12 @@ $menu-icon-spacing: 0.25rem !default;
     &.nested {
       @include menu-nested;
     }
+
+    // Active state
+    .is-active > a {
+      color: $menu-item-color-active;
+      background: $menu-item-background-active;
+    }
   }
 
   .menu-text {