page header

page header docs

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

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 %} // 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, } 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, current: true, } only %}
HTML
Not available in plain HTML. Please use Twig.