From a6c0404e2aab2d2ec45c76e5e8e885c3ff0be661 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Thu, 26 Jan 2017 11:31:46 +0800
Subject: ADD: Nav for vertical list

---
 index.html | 40 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

(limited to 'index.html')

diff --git a/index.html b/index.html
index a1215b4..8dc7646 100644
--- a/index.html
+++ b/index.html
@@ -2241,7 +2241,7 @@
         <section id="navigation" class="container grid-960">
             <header class="text-center"><h4>navigation</h4></header>
             <section class="notes">
-                <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs and pagination.</p>
+                <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and nav.</p>
             </section>
             <header id="breadcrumbs" class="text-center"><h5>breadcrumbs</h5></header>
             <div class="columns">
@@ -2518,6 +2518,44 @@
 &lt;<span class="tag">/ul</span>&gt;
 </pre>
 
+            <header id="nav" class="text-center"><h5>nav</h5></header>
+            <div class="columns">
+                <div class="column col-6 col-xs-12">
+                    <ul class="nav">
+                        <li class="nav-item">
+                            <a href="#nav">Elements</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#nav"><strong>Layout</strong></a>
+                            <ul class="nav">
+                                <li class="nav-item">
+                                    <a href="#nav">flexbox-grid</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#nav">responsive</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#nav">navbar</a>
+                                </li>
+                                <li class="nav-item">
+                                    <a href="#nav">empty states</a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#nav">Components</a>
+                        </li>
+                        <li class="nav-item">
+                            <a href="#nav">Utilities</a>
+                        </li>
+                    </ul>
+                </div>
+
+            </div>
+            <section class="notes">
+                <p>Add a container element with the class <code>nav</code>. And add child elements with the classname <code>nav-item</code>. The <code>nav-item</code> with the class <code>active</code> will be highlighted.</p>
+            </section>
+
         </section>
 
         <section id="modals" class="container grid-960">
-- 
cgit v1.3.1-23-gd82d