导航与菜单
ModernDuang 提供灵活的多层级导航菜单系统,支持三种菜单项类型:简单链接、扩展链接和下拉子菜单。你可以在 _config.modernduang.yml 的 menu 字段中完成所有配置。
简单菜单项
最简单的配置方式:键为菜单标签,值为 URL 字符串。若标签名称匹配内置图标名,菜单项会自动显示对应图标。
扩展菜单项
当需要外链或自定义图标时,将值改为一个包含详细选项的对象:
提示:
external: true的菜单项会添加target="_blank"属性,在新标签页中打开链接。
下拉子菜单
通过 children 字段定义嵌套子菜单,子菜单项同样支持简单或扩展两种格式:
- 父级菜单项可以设置自定义
icon,否则显示默认文件夹图标。 - 子菜单项完全支持
url、icon、external属性。 - 嵌套仅支持一层,不支持更深层级。
内置图标
以下菜单标签名拥有内置 SVG 图标,无需手动指定 icon:
如果你使用的标签名不在上述列表中(比如英文标签或自定义名称),请通过 icon 属性提供自己的 SVG 字符串。
移动端菜单行为
在移动设备(屏幕宽度小于 768px)上,导航菜单会折叠为汉堡按钮。点击后展开全屏覆盖菜单:
- 简单菜单项和扩展菜单项直接平铺显示。
- 下拉子菜单以可折叠手风琴方式呈现,点击父级展开/收起子项。
- 点击菜单项内任意链接后菜单自动关闭。
- 菜单打开时页面主体滚动被锁定,防止背景滚动穿透。
完整配置示例
以下是一个综合示例,涵盖了三种菜单项类型:
