Header Overview
The header module is a universal top app bar that ships with some useful sub modules, such as search form, social links, light/dark mode toggle and language picker.
On this page
| Module | github.com/hbstack/header |
|---|---|
| Repository | ⭐ Please consider giving a star if your like it. |
| Stars |  |
| Version |  |
| Used by |  |
| Requirements |  |
| License |  |
| Usage | See how to use modules. |
Site Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
brand | string | Site’s title | The brand text. |
breakpoint | string | lg | Collapse the header when screen width is less than the breakpoint, otherwise expand. Available options: lg, xl, xxl. |
full_width | boolean | true | Whether to take full width. |
logo_bg | string | - | Logo background color, used by transparent logo. |
menus_alignment | string | start | Menus alignment: start, center and end. |
sticky | boolean | true | Whether to sticky the header. |
theme | string | - | Removed since v0.4.0, see themes. |
The
logoparameter belongs to core module.
hugo.toml
1[params]
2 [params.hb]
3 logo = 'images/logo.png'
4 [params.hb.header]
5 brand = ''
6 breakpoint = 'lg'
7 full_width = true
8 logo_bg = 'indigo'
9 menus_alignment = 'start'
10 sticky = true
hugo.yaml
1params:
2 hb:
3 header:
4 brand: ""
5 breakpoint: lg
6 full_width: true
7 logo_bg: indigo
8 menus_alignment: start
9 sticky: true
10 logo: images/logo.png
hugo.json
1{
2 "params": {
3 "hb": {
4 "header": {
5 "brand": "",
6 "breakpoint": "lg",
7 "full_width": true,
8 "logo_bg": "indigo",
9 "menus_alignment": "start",
10 "sticky": true
11 },
12 "logo": "images/logo.png"
13 }
14 }
15}
Hooks
| Name | Description |
|---|---|
hb-header-nav-begin | At the beginning of header nav. |
hb-header-togglers-begin | At the beginning of toggler buttons. |
hb-header-togglers-end | Before the ending of toggler buttons. |
hb-header-panel | Header panel. |