Browser docs

Menus

February 19, 2023 5 min read Module Menus Docs Footer Footer Menus
On this page

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

As the image shown, the footer’s menus has two levels.

The footer is taken as the footer’s menus set identifier.

Footer Menu Entry Params

ParameterTypeDescription
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

Footer Menus Example

menus.toml

 1[[footer]]
 2identifier = 'a'
 3name = 'A'
 4[[footer]]
 5name = 'A-1'
 6parent = 'a'
 7url = '#a-1'
 8[footer.params]
 9  [footer.params.icon]
10    color = '#712cf9'
11    name = '1-square'
12    vendor = 'bootstrap'
13[[footer]]
14name = 'A-2'
15parent = 'a'
16url = '#a-2'
17[footer.params]
18  [footer.params.icon]
19    color = '#712cf9'
20    name = '2-square'
21    vendor = 'bootstrap'
22[[footer]]
23identifier = 'b'
24name = 'B'
25[[footer]]
26name = 'B-1'
27parent = 'b'
28url = '#b-1'
29[footer.params]
30  [footer.params.icon]
31    color = 'green'
32    name = '1-square'
33    vendor = 'bootstrap'
34[[footer]]
35name = 'B-2'
36parent = 'b'
37url = '#b-2'
38[footer.params]
39  [footer.params.icon]
40    color = 'green'
41    name = '2-square'
42    vendor = 'bootstrap'
43[[footer]]
44identifier = 'c'
45name = 'C'
46[[footer]]
47name = 'C-1'
48parent = 'c'
49url = '#c-1'
50[footer.params]
51  [footer.params.icon]
52    color = 'blue'
53    name = '1-square'
54    vendor = 'bootstrap'
55[[footer]]
56name = 'C-2'
57parent = 'c'
58url = '#c-2'
59[footer.params]
60  [footer.params.icon]
61    color = 'blue'
62    name = '2-square'
63    vendor = 'bootstrap'
64[[footer]]
65identifier = 'd'
66name = 'D'
67[[footer]]
68name = 'D-1'
69parent = 'd'
70url = '#d-1'
71[footer.params]
72  [footer.params.icon]
73    color = 'red'
74    name = '1-square'
75    vendor = 'bootstrap'
76[[footer]]
77name = 'D-2'
78parent = 'd'
79url = '#d-2'
80[footer.params]
81  [footer.params.icon]
82    color = 'red'
83    name = '2-square'
84    vendor = 'bootstrap'

menus.yaml

 1footer:
 2- identifier: a
 3  name: A
 4- name: A-1
 5  params:
 6    icon:
 7      color: '#712cf9'
 8      name: 1-square
 9      vendor: bootstrap
10  parent: a
11  url: '#a-1'
12- name: A-2
13  params:
14    icon:
15      color: '#712cf9'
16      name: 2-square
17      vendor: bootstrap
18  parent: a
19  url: '#a-2'
20- identifier: b
21  name: B
22- name: B-1
23  params:
24    icon:
25      color: green
26      name: 1-square
27      vendor: bootstrap
28  parent: b
29  url: '#b-1'
30- name: B-2
31  params:
32    icon:
33      color: green
34      name: 2-square
35      vendor: bootstrap
36  parent: b
37  url: '#b-2'
38- identifier: c
39  name: C
40- name: C-1
41  params:
42    icon:
43      color: blue
44      name: 1-square
45      vendor: bootstrap
46  parent: c
47  url: '#c-1'
48- name: C-2
49  params:
50    icon:
51      color: blue
52      name: 2-square
53      vendor: bootstrap
54  parent: c
55  url: '#c-2'
56- identifier: d
57  name: D
58- name: D-1
59  params:
60    icon:
61      color: red
62      name: 1-square
63      vendor: bootstrap
64  parent: d
65  url: '#d-1'
66- name: D-2
67  params:
68    icon:
69      color: red
70      name: 2-square
71      vendor: bootstrap
72  parent: d
73  url: '#d-2'

menus.json

  1{
  2   "footer": [
  3      {
  4         "identifier": "a",
  5         "name": "A"
  6      },
  7      {
  8         "name": "A-1",
  9         "params": {
 10            "icon": {
 11               "color": "#712cf9",
 12               "name": "1-square",
 13               "vendor": "bootstrap"
 14            }
 15         },
 16         "parent": "a",
 17         "url": "#a-1"
 18      },
 19      {
 20         "name": "A-2",
 21         "params": {
 22            "icon": {
 23               "color": "#712cf9",
 24               "name": "2-square",
 25               "vendor": "bootstrap"
 26            }
 27         },
 28         "parent": "a",
 29         "url": "#a-2"
 30      },
 31      {
 32         "identifier": "b",
 33         "name": "B"
 34      },
 35      {
 36         "name": "B-1",
 37         "params": {
 38            "icon": {
 39               "color": "green",
 40               "name": "1-square",
 41               "vendor": "bootstrap"
 42            }
 43         },
 44         "parent": "b",
 45         "url": "#b-1"
 46      },
 47      {
 48         "name": "B-2",
 49         "params": {
 50            "icon": {
 51               "color": "green",
 52               "name": "2-square",
 53               "vendor": "bootstrap"
 54            }
 55         },
 56         "parent": "b",
 57         "url": "#b-2"
 58      },
 59      {
 60         "identifier": "c",
 61         "name": "C"
 62      },
 63      {
 64         "name": "C-1",
 65         "params": {
 66            "icon": {
 67               "color": "blue",
 68               "name": "1-square",
 69               "vendor": "bootstrap"
 70            }
 71         },
 72         "parent": "c",
 73         "url": "#c-1"
 74      },
 75      {
 76         "name": "C-2",
 77         "params": {
 78            "icon": {
 79               "color": "blue",
 80               "name": "2-square",
 81               "vendor": "bootstrap"
 82            }
 83         },
 84         "parent": "c",
 85         "url": "#c-2"
 86      },
 87      {
 88         "identifier": "d",
 89         "name": "D"
 90      },
 91      {
 92         "name": "D-1",
 93         "params": {
 94            "icon": {
 95               "color": "red",
 96               "name": "1-square",
 97               "vendor": "bootstrap"
 98            }
 99         },
100         "parent": "d",
101         "url": "#d-1"
102      },
103      {
104         "name": "D-2",
105         "params": {
106            "icon": {
107               "color": "red",
108               "name": "2-square",
109               "vendor": "bootstrap"
110            }
111         },
112         "parent": "d",
113         "url": "#d-2"
114      }
115   ]
116}

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.