Browser docs

Menus

February 17, 2023 3 min read Module Header Docs Menus Header Menus
On this page

This article describes how to configure the header’s menus.

The header’s menus maximum depth is limited up to two levels.

The main is taken as the header’s menus set identifier.

Header Menu Entry Params

ParameterTypeDescription
headerstringThe header of dropdown menus, available on top level menu only.
dividerbooleanShow the divider if true.
descriptionstringThe description for sub menus only.
iconobjectThe icon parameters.
icon.vendorstringThe icon’s vendor, required.
icon.namestringThe icon’s name, required.
icon.colorstringThe icon’s color.

See also Menus Configuration.

Example

Header Menus Example

menus.toml

 1[[main]]
 2name = 'Home'
 3url = '/'
 4weight = 1
 5[main.params]
 6  [main.params.icon]
 7    name = 'house'
 8    vendor = 'bootstrap'
 9[[main]]
10identifier = 'foobar'
11name = 'FooBar'
12[main.params]
13  header = 'The header of FooBar'
14  [main.params.icon]
15    name = 'rocket-takeoff'
16    vendor = 'bootstrap'
17[[main]]
18name = 'Foo'
19parent = 'foobar'
20url = '#foo'
21weight = 1
22[main.params]
23  description = 'Foo description.'
24  [main.params.icon]
25    color = 'red'
26    name = 'heart-fill'
27    vendor = 'bootstrap'
28[[main]]
29parent = 'foobar'
30weight = 2
31[main.params]
32  divider = true
33[[main]]
34name = 'Bar'
35parent = 'foobar'
36url = '#bar'
37weight = 3
38[main.params]
39  description = 'Bar description.'
40  [main.params.icon]
41    color = '#198754'
42    name = 'toggle-off'
43    vendor = 'bootstrap'

menus.yaml

 1main:
 2- name: Home
 3  params:
 4    icon:
 5      name: house
 6      vendor: bootstrap
 7  url: /
 8  weight: 1
 9- identifier: foobar
10  name: FooBar
11  params:
12    header: The header of FooBar
13    icon:
14      name: rocket-takeoff
15      vendor: bootstrap
16- name: Foo
17  params:
18    description: Foo description.
19    icon:
20      color: red
21      name: heart-fill
22      vendor: bootstrap
23  parent: foobar
24  url: '#foo'
25  weight: 1
26- params:
27    divider: true
28  parent: foobar
29  weight: 2
30- name: Bar
31  params:
32    description: Bar description.
33    icon:
34      color: '#198754'
35      name: toggle-off
36      vendor: bootstrap
37  parent: foobar
38  url: '#bar'
39  weight: 3

menus.json

 1{
 2   "main": [
 3      {
 4         "name": "Home",
 5         "params": {
 6            "icon": {
 7               "name": "house",
 8               "vendor": "bootstrap"
 9            }
10         },
11         "url": "/",
12         "weight": 1
13      },
14      {
15         "identifier": "foobar",
16         "name": "FooBar",
17         "params": {
18            "header": "The header of FooBar",
19            "icon": {
20               "name": "rocket-takeoff",
21               "vendor": "bootstrap"
22            }
23         }
24      },
25      {
26         "name": "Foo",
27         "params": {
28            "description": "Foo description.",
29            "icon": {
30               "color": "red",
31               "name": "heart-fill",
32               "vendor": "bootstrap"
33            }
34         },
35         "parent": "foobar",
36         "url": "#foo",
37         "weight": 1
38      },
39      {
40         "params": {
41            "divider": true
42         },
43         "parent": "foobar",
44         "weight": 2
45      },
46      {
47         "name": "Bar",
48         "params": {
49            "description": "Bar description.",
50            "icon": {
51               "color": "#198754",
52               "name": "toggle-off",
53               "vendor": "bootstrap"
54            }
55         },
56         "parent": "foobar",
57         "url": "#bar",
58         "weight": 3
59      }
60   ]
61}

The example above use the Bootstrap icons, if the icons do not show up, please check if you’ve installed/imported the following module.

hugo.toml

1[module]
2[[module.imports]]
3  path = 'github.com/razonyang/hugo-mod-icons/vendors/bootstrap'

hugo.yaml

1module:
2  imports:
3  - path: github.com/razonyang/hugo-mod-icons/vendors/bootstrap

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/razonyang/hugo-mod-icons/vendors/bootstrap"
6         }
7      ]
8   }
9}

The Bootstrap icons and other icons vendors can be found on Hugo Icons Module.