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

Modulegithub.com/hbstack/header
Repository⭐ Please consider giving a star if your like it.
Stars
Version
Used by
Requirements
License
UsageSee how to use modules.

Site Parameters

ParameterTypeDefaultDescription
brandstringSite’s titleThe brand text.
breakpointstringlgCollapse the header when screen width is less than the breakpoint, otherwise expand. Available options: lg, xl, xxl.
full_widthbooleantrueWhether to take full width.
logoboolean-When false hide the logo.
logo_bgstring-Logo background color, used by transparent logo.
main_brandobject-Main brand.
main_brand.titlestring-Main brand title.
main_brand.logostring-Main brand logo, relative to assets.
main_brand.urlstring-Main brand URL.
main_brand.hide_titlebooleanfalseWhether to hide main brand title.
menus_alignmentstringstartMenus alignment: start, center and end.
stickybooleantrueWhether to sticky the header.
themestring-Removed since v0.4.0, see themes.

The logo parameter 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

NameDescription
hb-header-nav-beginAt the beginning of header nav.
hb-header-togglers-beginAt the beginning of toggler buttons.
hb-header-togglers-endBefore the ending of toggler buttons.
hb-header-panelHeader panel.
razonyang
Monday, July 15, 2024 Thursday, February 16, 2023