Skip to content

Hugo Narrow supports three menus:

  • Main menu at header
  • footer menu
  • social menu

The icon is the icon before the title. It uses the SVG format and should be placed in the hugo-narrow/assets/icons/ directory. The filename is used as the parameter value for reference.

TIP

You can find more great icons at Iconify Design.

Supports creating menus for different languages by creating language suffix files: menus.zh-hans.yaml.

yaml
main:
  - name: Posts
    pageRef: /posts
    weight: 10
    params:
      icon: posts

  - name: Archives
    pageRef: /archives
    weight: 20
    params:
      icon: archive

  # Example: parent item with dropdown submenu children
  - name: More
    weight: 30
    params:
      icon: layers

  - name: Categories
    weight: 1
    pageRef: /categories
    parent: More
    params:
      icon: categories

  - name: Tags
    weight: 2
    pageRef: /tags
    parent: More
    params:
      icon: tags

  - name: Series
    weight: 3
    pageRef: /series
    parent: More
    params:
      icon: bookmark

  - name: Projects
    weight: 4
    pageRef: /projects
    parent: More
    params:
      icon: projects

# footer menu
footer:
  - name: Timeline
    pageRef: /timeline
    weight: 10
    params:
      icon: chart

  - name: About
    pageRef: /about
    weight: 20
    params:
      icon: about

  - name: Resume
    pageRef: /resume
    weight: 25
    params:
      icon: file-text

  - name: RSS Feed
    url: /index.xml
    weight: 30
    params:
      icon: rss

# footer social link
social:
  - name: GitHub
    url: https://github.com/username
    weight: 10
    params:
      icon: github
  - name: Twitter
    url: https://twitter.com/username
    weight: 20
    params:
      icon: twitter
  - name: LinkedIn
    url: https://linkedin.com/in/username
    weight: 30
    params:
      icon: linkedin
  - name: Email
    url: mailto:your.email@example.com
    weight: 40
    params:
      icon: email