#Navigation & Menus

The top navigation bar is one of the first things your visitors see. ModernDuang gives you full control over what appears in the nav bar, how it looks, and whether links open in new tabs.

#Basic Configuration

All navigation is configured through the menu key in your theme config file (_config.modernduang.yml):

menu:
  首页: /
  归档: /archives
  标签: /tags
  分类: /categories

Each key is the display name shown in the nav bar, and each value is the URL the link points to.

#Simple Menu Items

A simple menu item is a key-value pair. ModernDuang automatically assigns a built-in SVG icon when the key matches one of the recognized Chinese names:

menu:
  首页: /          # Uses built-in "home" icon
  归档: /archives   # Uses built-in "archive" icon
  标签: /tags       # Uses built-in "tags" icon
  分类: /categories # Uses built-in "categories" icon

#Built-in Icon Names

The following Chinese menu names are pre-mapped to SVG icons:

If your menu name does not match one of the above, no icon is shown by default. Use the extended menu item format to supply a custom icon.

#Extended Menu Items

For finer control — custom icons, external links, or submenus — use the extended object format:

menu:
  GitHub:
    url: https://github.com/yourname
    icon: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>'
    external: true

Tip: The icon value must be a raw inline SVG string, not a file path. Copy the SVG markup directly, including the <svg> tag.

#Dropdown Submenus

Any extended menu item can have a children object to create a dropdown submenu. Each child follows the same format as top-level menu items (simple or extended):

menu:
  项目:
    icon: '<svg viewBox="0 0 24 24">...</svg>'
    children:
      主题商店: /themes
      GitHub:
        url: https://github.com/yourname
        external: true
        icon: '<svg>...</svg>'

When a user hovers over "项目", a dropdown appears showing "主题商店" and "GitHub" as sub-items. The parent item can optionally have its own icon. The parent itself is not clickable — it only serves as a dropdown trigger.

#Behavior

• Desktop: Dropdowns open on hover and close when the mouse leaves.
• Mobile: Dropdowns toggle on tap. The parent shows a small arrow indicator to distinguish it from regular links.

#External Links

Set external: true on any extended menu item to make it open in a new tab:

menu:
  Hexo官网:
    url: https://hexo.io/
    external: true

External links also display a small open-in-new-tab indicator icon (a diagonal arrow) after the label, so visitors know they will leave your site.

#Mobile Menu Behavior

On screens narrower than 768px, the navigation bar collapses into a hamburger menu. The mobile drawer:

• Slides in from the right with a smooth animation
• Shows all menu items vertically, including dropdowns which can be expanded by tapping
• Displays a semi-transparent overlay behind the drawer that dismisses the menu on tap
• Triggers external links to open in a new tab just like on desktop

There is no separate mobile configuration — the menu adapts automatically.

#Complete Example

Here is a realistic nav bar configuration with a mix of all item types:

menu:
  首页: /
  归档: /archives
  标签: /tags
  分类: /categories
  友链: /links
  开往:
    url: https://www.travellings.cn/go.html
    external: true
  关于: /about
  GitHub:
    url: https://github.com/yourname
    icon: '<svg viewBox="0 0 24 24" ...>...</svg>'
    external: true
  工具:
    icon: '<svg viewBox="0 0 24 24" ...>...</svg>'
    children:
      JSON格式化: /tools/json
      Markdown预览:
        url: https://md.example.com
        external: true

#Related Pages

• Profile Card — Social icons on the homepage profile card
• Footer & ICP Beian — Social icons and links in the footer
• Social Icons — Full list of built-in social icon names