From: Eva Gagnon-Messier <egagnon@getchalk.com>
Date: Mon, 21 Oct 2019 00:22:05 +0000 (-0300)
Subject: docs: include documentation for icon position with nested styles #10623
X-Git-Tag: v6.7.1~65^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F11876%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

docs: include documentation for icon position with nested styles #10623
---

diff --git a/docs/pages/menu.md b/docs/pages/menu.md
index c4e75b38d..59c8ac49c 100644
--- a/docs/pages/menu.md
+++ b/docs/pages/menu.md
@@ -370,6 +370,29 @@ When using any of the menu icon layout classes, ensure that the icon and the tex
   <li><a href="#"><i class="fi-list"></i> <span>Four</span></a></li>
 </ul>
 ```
+
+<br>
+
+### Icon Position with Nested Styles
+Nested lists can have icons positioned differently based on the menu layer. Add the class `.nested` to the nested list and your desired icon position: `.icon-top`, `.icon-right`, `.icon-bottom`, `.icon-left`.
+
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/qjYmdG?editors=1100" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
+```html_example
+<ul class="vertical menu icons icon-top">
+  <li>
+    <a href="#"><i class="fi-list"></i> One</a>
+    <ul class="nested vertical menu icons icon-left">
+      <li><a href="#"><i class="fi-list"></i> One</a></li>
+      <li><a href="#"><i class="fi-list"></i> Two</a></li>
+    </ul>
+  </li>
+  <li><a href="#"><i class="fi-list"></i> Two</a></li>
+  <li><a href="#"><i class="fi-list"></i> Three</a></li>
+</ul>
+```
 ---
 
 ## Sticky Navigation