導航一般指頁面引導性頻道集合，經常以菜單的形式展示，多用於頁面頭部和側邊欄。layui提供了水平導航、垂直導航、側邊導航、麵包屑導航。麵包屑導航結構簡單，並且支持自定義分隔符，默認為">"。使用layui的導航UI，需要加載 element模塊。加載方式如下：
首先引入layui.css和layui.js文件，然後加載element模塊，我這裡習慣在head里加載css文件，在body結束前加載js文件，結構如下：
1、水平導航
水平導航是layui導航的基礎導航，後兩個垂直導航與側邊導航是在水平導航的基礎上實現的。水平效果如下：
案例代碼如下：
layui導航中通過設定layui-this來指向當前頁面分類，與active類似。導航中除了文字之外，還可以加一些徽章或者圖片，比如：
實例代碼如下：
<li class="layui-nav-item"><a href=""><img src="/avatar/58704a5e5843d.png" class="layui-nav-img">會員中心<span class="layui-badge">9</span></a></li>
關於徽章的用法比較簡單，有小圓點、橢圓體、邊框體三種風格，對應的樣式分別為：
小圓點：通過 layui-badge-dot 類來定義，裡面不能加文字，比如<span class="layui-badge-dot"></span>；
橢圓體：通過 layui-badge 類來定義，裡面是可以加文字的，比如<span class="layui-badge">99</span>；
邊框體：通過 layui-badge-rim 類來定義，也是可以加文字的，比如<span class="layui-badge-rim">Hot</span>
關於顏色風格，就沒什麼可介紹的了，自己根據UI設計的效果定義即可。
2、垂直導航
垂直導航與水平導航的HTML結構是一樣的，直接追加class：layui-nav-tree 即可。
示例代碼如下：
<ul class="layui-nav layui-nav-tree layui-main" lay-filter=""> ……</ul>
3、側邊導航
側邊導航也一樣，不過需要追加的是：layui-nav-tree layui-nav-side兩個類，後臺管理中心經常用到類似效果。
示例代碼如下：
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="">……</ul>
4、麵包屑導航
麵包屑導航，叫做路徑導航也可以，經常在頁面路徑那使用，比如：首頁> 前端開發 > UI框架 > layui
示例代碼如下：
<span class="layui-breadcrumb"><a href="">首頁</a><a href="">前端開發</a><a href="">UI框架</a><a><cite>layui</cite></a></span>
另外，我們可以通過設置屬性 lay-separator="|" 來自定義分隔符，比如可以用麵包屑製作小導航：
代碼如下：
<span class="layui-breadcrumb" lay-separator="|"> <a href="">前端</a> <a href="">PHP</a> <a href="">Java</a> <a href="">Python</a> <a href="">.NET</a></span>
當然，分隔符是自定義的。
導航主題
另外，layui推薦了幾個導航主題：
水平導航支持的其它背景主題有：layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（豔藍）
垂直導航支持的其它背景主題有：layui-bg-cyan（藏青）
自己可以試試效果，個人感覺用到的時候會比較少，因為實際項目中往往會重寫這些導航背景，甚至高度等樣式。
相關推薦
