ZartUI · SideNav 侧边导航 规范预览

组件演示

完整结构(一 / 二 / 三级)
状态对比
箭头状态
规格参数
层级属性规格值说明
一级菜单 侧边栏宽度 min-width: 200px 随文字内容自动撑宽
容器内边距8px(四周)
字号 / 图标14px · 图标 16×16px线状图标,图标与文字间距 8px
默认颜色 #223355 图标与文字同色
文字起始位置padding-left: 8px 后,图标占 16px + gap 8px文字从第 32px 开始
二级菜单 文字缩进 padding-left: 40px 相比一级文字位置后缩 8px(32+8),无图标
默认颜色 #6B7A99
图标无
三级菜单 文字缩进 padding-left: 48px 相比二级文字位置再后缩 8px(40+8),无图标
默认颜色 #6B7A99
图标无
所有层级 菜单项高度 36px
菜单间距8px相邻菜单项之间,无分隔线
Hover 背景 #F5F7FA
选中背景 / 颜色 #F0F9FF 图标与文字变为 #3388FF
展开箭头 折叠状态 朝下 ↓(默认) 有子菜单时显示,靠右对齐
展开状态 朝上 ↑(rotate 180°) 子菜单展开时翻转
返回组件首页