依賴于模塊：element
layui-nav layui-nav-item
layui-this
layui-nav-item layui-nav-child
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="">最新活動(dòng)</a></li>
<li class="layui-nav-item layui-this"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動(dòng)模塊</a></dd>
<dd><a href="">后臺(tái)模版</a></dd>
<dd><a href="">電商平臺(tái)</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">社區(qū)</a></li>
</ul>
<script>
//注意：導(dǎo)航 依賴 element 模塊，否則無法進(jìn)行功能性操作
layui.use('element', function(){
var element = layui.element;
//…
});
</script>
徽章，圖片導(dǎo)航
layui-badge layui-badge-dot layui-nav-img
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="">控制臺(tái)<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">個(gè)人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul>
導(dǎo)航加背景色 layui-bg-green
//如定義一個(gè)墨綠背景色的導(dǎo)航
<ul class="layui-nav layui-bg-green" lay-filter="">
…
</ul>
側(cè)邊欄導(dǎo)航欄
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默認(rèn)展開</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">選項(xiàng)1</a></dd>
<dd><a href="javascript:;">選項(xiàng)2</a></dd>
<dd><a href="">跳轉(zhuǎn)</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解決方案</a>
<dl class="layui-nav-child">
<dd><a href="">移動(dòng)模塊</a></dd>
<dd><a href="">后臺(tái)模版</a></dd>
<dd><a href="">電商平臺(tái)</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">產(chǎn)品</a></li>
<li class="layui-nav-item"><a href="">大數(shù)據(jù)</a></li>
</ul>
其他屬性
面包屑;layui-breadcrumb
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">國(guó)際新聞</a>
<a href="">亞太地區(qū)</a>
<a><cite>正文</cite></a>
</span>
