Header, Top Bar & Contact Drawer

Files: src/config/config.toml, src/config/menu.en.json, src/content/sections/english/home-header.md · Skill level: Beginner

The header has three parts: an optional top bar with contact details, the navigation bar (logo, menu, language switch, search, and the header button), and a contact drawer that slides in from the side. On small screens the menu folds into a menu button.

Which Header Each Page Uses

The header style is chosen by each route, so you don’t pick it in a setting:

Page	Header
Main homepage (`/`)	Transparent over the banner, no top bar by default
Corporate consulting (`/corporate-consulting/`)	Standard header with the slim “info” top bar
Tax and accounting (`/tax-accounting/`)	Its own header with an announcement strip, phone number, and contact button
Inner pages	Standard header with the “brand” top bar (logo and contact details above the menu)

What you control is the content of each part, below.

The Top Bar

Every top bar reads [settings.headerTopBar]:

[settings.headerTopBar]
  enable  = true                # master switch for every top bar
  email   = "[email protected]"  # demo value: replace it
  phone   = "+44-800 123 456"   # demo value: replace it
  address = ""                  # empty uses home-header.md > address
  hours   = ""                  # empty uses home-header.md > hours

  showAddress        = true
  showEmail          = true
  showPhone          = true
  showHours          = true
  showSocial         = true     # the enabled links in src/config/social.json
  showOfficeDropdown = true     # the office list below

  [settings.headerTopBar.link]  # highlighted link at the end of the "info" top bar
    enable = true
    label  = ""                 # empty uses home-header.md > topBarLinkLabel
    url    = "/contact/"

The style of the top bar for each header is set in [settings.headerTopBar.layouts]:

Key	Header	Values
`default`	Inner pages	`"brand"` · `"info"` · `"none"`
`home`	Main homepage	`"info"` · `"none"`
`corporate`	Corporate consulting homepage	`"brand"` · `"info"` · `"none"`
`service`	Tax and accounting homepage	`"announcement"` · `"info"` · `"none"`

"brand": the logo with contact details above the menu (a classic two-row header)
"info": a slim strip with address, email, phone, hours, social links, the office list, and the highlighted link
"announcement": a promotional strip. Its text and button are serviceHeader.announcement in src/content/homepage/english/tax-accounting.md
"none": no top bar

Top bars always scroll away with the page. Only the navigation bar can stick to the top (stickyHeader under [settings]).

The Office List

The Our office dropdown in the top bar:

[settings.officeDropdown]
  enable = true
  label  = "Our office"
  offices = [
    { name = "United Kingdom", flag = "🇬🇧", url = "/contact/" },
    { name = "Paris, France", flag = "🇫🇷", url = "/contact/" },
  ]

The shipped list is sample data. Replace it with your offices, or set enable = false (or showOfficeDropdown = false) if you have one office.

The Header Button

[settings.navigationButton]
  enable = true
  label  = ""          # empty uses navigation.buttonLabel from src/i18n/en.json
  url    = "/contact/"

To change the words in both languages, edit navigation.buttonLabel in src/i18n/en.json and src/i18n/fr.json. The tax and accounting header has its own button: serviceHeader.contactButton in src/content/homepage/english/tax-accounting.md.

Search

The header search button is hidden until you give it a destination:

[settings.headerActions]
  exploreLabel    = ""          # empty uses navigation.search from the i18n files
  exploreUrl      = "/search/"  # empty hides search on every page
  enableOffcanvas = true

/search/ is the included search page. It searches the titles and descriptions of blog posts, solutions, industries, people, careers, and portfolio projects in the visitor’s language. Its labels are in src/content/sections/english/search-section.md. You can also point exploreUrl at another search service.

The Contact Drawer

The drawer opened from the round button at the right of the header shows your logo, a short description, your contact details, opening hours, social links, and a button:

[settings.headerOffcanvas]
  enable      = true
  logo        = ""   # empty uses the site logo
  description = ""   # empty uses home-header.md on the homepage, or headerOffcanvas.description in the i18n files

  [settings.headerOffcanvas.button]
    enable = true
    label  = ""      # empty uses the translated label
    url    = "/contact/"

Both [settings.headerOffcanvas] enable and [settings.headerActions] enableOffcanvas must be true to show it. The contact details come from [settings.contactInfo], the hours from [settings.contactInfo] hours (or home-header.md), and the social links from the enabled entries in src/config/social.json. The mobile menu has its own button and keeps working when the drawer is off.

Header Text In Content Files

src/content/sections/english/home-header.md (and french/) holds the header text that is not a setting:

address: "London EC2A 4NE, United Kingdom"
description: "..."            # drawer description on the homepage
officeTitle: "Head Office"
contactTitle: "Contact Info"
hours: "Sunday - Thursday | 9:00 AM - 6:00 PM"
topBarLinkLabel: "Book a free consultation"

The links and dropdown panels come from src/config/menu.en.json and menu.fr.json. See Menus. The language switch shows when more than one language is enabled (Internationalization).

Header, Top Bar & Contact Drawer