Page Header

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

Published Last updated: 2.31.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
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