From 7d5c1c500b4ada92dd09693019c412d3d5af78e7 Mon Sep 17 00:00:00 2001
From: Eva Gagnon-Messier <egagnon@getchalk.com>
Date: Sun, 20 Oct 2019 21:22:05 -0300
Subject: [PATCH] docs: include documentation for icon position with nested
 styles #10623

---
 docs/pages/menu.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

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
-- 
2.47.2