This article describes how to configure the header’s menus.
The main
is taken as the header’s menus set identifier.
Parameter | Type | Description |
---|---|---|
header | string | The header of dropdown menus, available on top level menu only. |
divider | boolean | Show the divider if true . |
description | string | The description for sub menus only, default to page description. |
columns | number | The column count of sub menus, up to 2 , default to 1 when the number of menus is less than 6 , otherwise 2 . |
icon | object | The icon parameters. |
icon.vendor | string | The icon’s vendor, required. |
icon.name | string | The icon’s name, required. |
icon.color | string | The icon’s color. |
icon.className | string | The icon’s CSS class name. |
See also Menus Configuration.
menus.toml
1[[main]]
2 name = 'Home'
3 url = '/'
4 weight = 1
5 [main.params]
6 [main.params.icon]
7 name = 'house'
8 vendor = 'bootstrap'
9[[main]]
10 identifier = 'foobar'
11 name = 'FooBar'
12 [main.params]
13 header = 'The header of FooBar'
14 [main.params.icon]
15 name = 'rocket-takeoff'
16 vendor = 'bootstrap'
17[[main]]
18 name = 'Foo'
19 parent = 'foobar'
20 url = '#foo'
21 weight = 1
22 [main.params]
23 description = 'Foo description.'
24 [main.params.icon]
25 color = 'red'
26 name = 'heart-fill'
27 vendor = 'bootstrap'
28[[main]]
29 parent = 'foobar'
30 weight = 2
31 [main.params]
32 divider = true
33[[main]]
34 name = 'Bar'
35 parent = 'foobar'
36 url = '#bar'
37 weight = 3
38 [main.params]
39 description = 'Bar description.'
40 [main.params.icon]
41 color = '#198754'
42 name = 'toggle-off'
43 vendor = 'bootstrap'
toml
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
yaml
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}
json
The example above use the Bootstrap icons, you can use other icons vendors, such as Font Awesome, Feather, Tabler, Simple icons and so on.