layui.navbar()原生仅支持两级菜单，三级需修改源码补全递归渲染逻辑；动态加载须用绝对路径或data方式避免404/CORS；选中态需手动匹配路径并向上冒泡添加layui-nav-itemed类。
原生 layui.navbar() 只能渲染两级菜单，三级及以上必须改源码或绕过它手写递归逻辑；动态加载失败、选中态丢失、路径 404 这三类问题占了实际开发中 90% 的报错场景。
layui.navbar() 渲染三级菜单为什么失效
你传入含三级结构的 JSON，但菜单展开后第三层消失——不是数据没传过去，是 render() 方法压根没处理 children 嵌套。原生只识别一级 <li> + 二级 <dl class="layui-nav-child"></dl>，遇到 children 里再套 children 就直接跳过。
解决方式不是换组件，而是补全递归：
- 定位到
lay/modules/navbar.js（Layui 2.8.x），找到render()内遍历菜单项的循环 - 在生成每个
<dd>后加判断：if (item.children && isArray(item.children)) { renderChildren(item.children) } -
renderChildren()必须生成<dd><dl class="layui-nav-child"></dl></dd>，class 名一个字母都不能错，否则layui-nav-itemed展开态不生效 - 别用
layui-tree替代，它的 DOM 结构和 CSS 类跟layui-nav不兼容，强行混用会导致样式断裂
动态加载 menu.json 总是 404 或 CORS 报错
navbar.set({ url: "../menu.json" }) 的 url 是浏览器发起的相对请求，不是服务端解析路径。当前页面 URL 是 /admin/user/list，实际请求的就是 /admin/user/../menu.json → /admin/menu.json，而文件可能放在 /static/menu.json 下。
更稳的做法：
- 把路径写成绝对路径：
url: "/static/menu.json"（确保 Nginx / Spring Boot static 目录可访问） - 或者弃用
url，改用data：先layui.jquery.get("/api/menu")拿数据，再navbar.set({ data: res.data }) - 本地开发别用
file://协议打开 HTML，CORS 会拦截；必须起服务（http-server、npm run serve或 Nginx） - Spring Boot 用户注意：JSON 文件得放在
src/main/resources/static/，而不是templates下
页面刷新后菜单高亮丢失
layui-this 和 layui-nav-itemed 都是 JS 运行时添加的 class，刷新就清空。Layui 不保存当前路由状态，得自己匹配。
关键细节：
- 别直接比
window.location.pathname和菜单href，前者带开头/，后者常为user/list，要用location.pathname.replace(/^\//, '').split('?')[0] - 三级菜单的
href在<dd>里，但展开父级需要给对应的<dt>或上级<li>加layui-nav-itemed - 匹配到子项后，得向上冒泡，把所有父级
layui-nav-itemed补上，否则只高亮最后一级，上面两级不展开 - 手动加 class 后，记得触发
layui.element.render('nav')让样式生效
三级递归、路径解析、选中态回溯这三块最容易被当成“小功能”忽略，但每一块出问题都会卡住整个权限体系落地。改源码前先备份，接口返回的数据结构必须含明确的 children 字段，别指望前端靠 id/pid 自己拼树。
