导航菜单包含水平导航和垂直导航， 在
2.x版本中，nav组件属于element模块的子集。
一般用于页面头部菜单。样式规则如下：
class="layui-nav" 设置导航容器class="layui-nav-item" 设置导航菜单项
className 为 layui-this 可设置菜单选中项class="layui-nav-child" 设置导航子菜单项
className 为 layui-nav-child-c 和 layui-nav-child-r 可设置子菜单居中和向右对齐备注：滑块效果仅跟随不存在子菜单的菜单项。
给导航容器追加任意背景色 class，内置背景色参考：#背景色公共类
一般用于左侧侧边菜单。样式规则如下：
class 规则上，通过设置 class="layui-nav layui-nav-tree" 定义垂直导航容器。class="layui-nav-itemed" 设置父菜单项为展开状态class="layui-nav-side" 可设置侧边垂直导航| API | 描述 |
|---|---|
| var element = layui.element | 获得 element 模块。 |
| element.render('nav', 'filter') | 导航菜单 nav 组件渲染。 |
element.render('nav', filter);
'nav' 是渲染导航的固定值filter : 对应导航容器 lay-filter 的属性值nav 组件会在元素加载完毕后，自动对导航完成一次渲染，因此该方法主要用于对动态插入的导航元素的初始化渲染。
<div id="test"></div>
<!-- import layui -->
<script>
layui.use(function(){
var element = layui.element;
var $ = layui.$;
// 动态插入导航元素
$('#test').html(`
<div class="layui-nav" lay-filter="demo-filter-nav">
<li class="layui-nav-item layui-this"><a href="">选中</a></li>
<li class="layui-nav-item"><a href="">菜单</a></li>
<!-- … -->
</div>
`);
// 渲染导航组件
element.render('nav', 'demo-filter-nav');
});
</script>
| 属性 | 描述 |
|---|---|
| lay-accordion 2.8.18+ | 导航容器属性。用于开启垂直导航菜单展开时的手风琴效果。如：<div class="layui-nav layui-nav-tree" lay-accordion>…</div> |
| lay-bar | 导航容器属性。用于禁用滑块跟随功能。如：<div class="layui-nav" lay-bar="disabled">…</div> |
| lay-unselect | 导航菜单项属性。 设置后，点击对应菜单项时，不会出现选中效果。 |
element.on('nav(filter)', callback)
nav(filter) 是一个特定结构。
nav 为导航事件固定值；filter 为导航容器属性 lay-filter 对应的值。callback 为事件执行时的回调函数，并返回一个 object 类型的参数。当点击导航父级菜单和二级菜单时触发。示例：
面包屑导航主要用于指示当前页面所处的位置，并能返回到上级页面。
element.render('breadcrumb', filter);
'breadcrumb' 是渲染面包屑导航的固定值filter : 对应面包屑导航容器 lay-filter 的属性值该方法主要用于对动态插入的面包屑导航的初始化渲染，用法同上述导航菜单。