page header docs

Page Header

Global header that contains the global search, primary navigation, and secondary navigation.

Published Last updated: 3.1.2 Change log Github NPM
Twig Usage
  {% include '@bolt-components-page-header/page-header.twig' with {
  logo: {
    image_src: '/images/logos/pega-logo.svg',
    label: 'Pegasystems',
    attributes: {
      href: 'https://pega.com',
    }
  },
  content: primary_nav_and_search_panel,
  secondary_content: secondary_nav,
  cta: cta_button,
  static: true,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
content *

Primary content of page header. Primary nav and search panel are expected here.

string , array , object
secondary_content

Secondary content of page header (sub nav, visible search bar, breadcrumbs, etc.).

string , array , object
logo *

Set the site logo. This can be turned into a link by passing the "href" attribute.

object
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the parent element.

    • image_src

      Set the path to the logo image.

    • label

      Set a label (visually hidden) for the logo.

cta

Set the main call-to-action. Button element is expected here.

object
theme

Set the color theme of the page header.

string
  • xlight , light , dark , xdark
static

Set the page header to be static instead of sticky.

boolean false
Install Install
  npm install @bolt/components-page-header
Dependencies @bolt/components-typeahead @bolt/core-v3.x hoverintent

page header

Basic Page Header Page header is the global header that contains the global search, primary navigation, and secondary navigation. Important Notes: Additional CSS custom properties are available to further customize the page header per use case. px, em, and rem unit values are supported in addition to tokens. --c-bolt-page-header-logo-max-width: At any breakpoint, limit the logo to a specific max-width. --c-bolt-page-header-desktop-spacing-y: Above large breakpoint, set the spacing-y (padding top/bottom) of the page header to a specific value. Spacing tokens are recommended. --c-bolt-page-header-desktop-site-nav-link-spacing-x: Above large breakpoint, set the spacing-x (padding left/right) of any primary nav link (top level) to a specific value. Spacing tokens are recommended. --c-bolt-page-header-desktop-primary-nav-link-font-size: Above large breakpoint, set the font-size of any primary nav link to a specific value. Font-size tokens are recommended. Demo
Pega.com View
Academy View
Community View
Collaboration Center View
SalesHub View
Twig
// The main template {% include '@bolt-components-page-header/page-header.twig' with { logo: { image_src: '/images/logos/pega-logo.svg', label: 'Pegasystems', attributes: { href: 'https://pega.com', } }, content: primary_nav_and_search_panel, secondary_content: secondary_nav, cta: cta_button, static: true, attributes: { style: '--c-bolt-page-header-logo-max-width: 150px', // Only use the CSS vars on edge cases }, } only %} // Search panel template (pass to main template's content prop) {% include '@bolt-components-page-header/page-header-search-panel.twig' with { content: content, } only %} // Primary nav template (pass to main template's content prop) {% include '@bolt-components-page-header/page-header-primary-nav.twig' with { content: content, } only %} // Nav ul template (pass to primary nav template's content prop) {% include '@bolt-components-page-header/page-header-nav-ul.twig' with { content: content, category: category, // ['site', 'related-sites', 'user'] popover_position: popover_position, // ['edge-start', 'edge-end'] wrap_site_nav_items: false, // This allows top level desktop site nav items to wrap } only %} // Nav li template (pass to nav ul template's content prop) {% include '@bolt-components-page-header/page-header-nav-li.twig' with { link: { content: 'Products', attributes: { href: 'https://pega.com/products', }, }, children: children, content: content, // This overrides link and children full_width: false, // This is for "view all" links popover: false, // This is for utility nav selected: false, // This is for language select current: true, // This is for marking a top level desktop site nav item as the current page } only %}
HTML
Not available in plain HTML. Please use Twig.