组件-导航栏
导航栏组件是一个用于展示导航菜单的组件。它可以水平或垂直显示，支持多级子菜单。
自适应导航栏
默认
- Preview
- Code
<div hx-ext="bny-nav">
<div class="head">
<div class="logo-box">
<div class="logo">
<img src="/bunny.png" alt="logo">
</div>
<span>Bunny</span>
</div>
</div>
<ul class="menu">
<li>
<div class="trigger">
<i class="bny-icon icon-home"></i>
<span>首页</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-setting"></i>
<span>系统管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-user"></i>
<span>用户管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-user"></i>
<span>用户列表</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-adduser"></i>
<span>添加用户</span>
</div>
</li>
</ul>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-robot"></i>
<span>角色权限</span>
</div>
</li>
</ul>
</li>
<li>
<div class="trigger" class="trigger">
<i class="bny-icon icon-calendar"></i>
<span>内容管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-article"></i>
<span>文章管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-select"></i>
<span>已发布</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-calendar-check"></i>
<span>草稿箱</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-select"></i>
<span>草稿箱列表</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-add"></i>
<span>添加草稿</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="trigger" class="trigger">
<i class="bny-icon icon-barchart"></i>
<span>数据统计</span>
</div>
</li>
</ul>
</div>
颜色
- Preview
- Code
<div hx-ext="bny-nav" color="white">...</div>
<div hx-ext="bny-nav" color="green">...</div>
<div hx-ext="bny-nav" color="yellow">...</div>
<div hx-ext="bny-nav" color="red">...</div>
<div hx-ext="bny-nav" color="blue">...</div>
侧边导航
默认
- Preview
- Code
<div hx-ext="bny-nav" side>
<div class="head">
<div class="logo-box">
<div class="logo">
<img src="/bunny.png" alt="logo">
</div>
<span>Bunny</span>
</div>
</div>
<ul class="menu">
<li>
<div class="trigger">
<i class="bny-icon icon-home"></i>
<span>首页</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-setting"></i>
<span>系统管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-user"></i>
<span>用户管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-user"></i>
<span>用户列表</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-adduser"></i>
<span>添加用户</span>
</div>
</li>
</ul>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-robot"></i>
<span>角色权限</span>
</div>
</li>
</ul>
</li>
<li>
<div class="trigger" class="trigger">
<i class="bny-icon icon-calendar"></i>
<span>内容管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-article"></i>
<span>文章管理</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-select"></i>
<span>已发布</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-calendar-check"></i>
<span>草稿箱</span>
<i class="bny-icon icon-right"></i>
</div>
<ul class="sub-menu">
<li>
<div class="trigger">
<i class="bny-icon icon-select"></i>
<span>草稿箱列表</span>
</div>
</li>
<li>
<div class="trigger">
<i class="bny-icon icon-add"></i>
<span>添加草稿</span>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div class="trigger" class="trigger">
<i class="bny-icon icon-barchart"></i>
<span>数据统计</span>
</div>
</li>
</ul>
</div>
收缩
- Preview
- Code
<div hx-ext="bny-nav" side collapsed>...</div>
展开/收缩 按钮
- Preview
- Code
<div hx-ext="bny-nav" side toggle>...</div>
颜色
- Preview
- Code
<div hx-ext="bny-nav" side toggle color="white">...</div>
<div hx-ext="bny-nav" side toggle color="green">...</div>
<div hx-ext="bny-nav" side toggle color="yellow">...</div>
<div hx-ext="bny-nav" side toggle color="red">...</div>
<div hx-ext="bny-nav" side toggle color="blue">...</div>