page header

page header docs

Page Header

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

Published Last updated: 5.1.0 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://google.com',
    }
  },
  content: primary_nav_and_search_panel,
  cta: cta_button,
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Page Header (page-header.twig)
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.

 any —
  • —
secondary_content

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

 any —
  • —
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.

      • —
subheadline

Text or other content to display next to the logo.

 any —
  • —
cta

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

 any —
  • —
static

Set the page header to be static instead of sticky.

 boolean false
  • —
full_width

Set the page header width to span across the full viewport.

 boolean false
  • —
Page Header Primary Nav (page-header-primary-nav.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content *

Content of page header primary nav. Nav ul are expected here.

 any —
  • —
align_site_nav_items

Set the site nav item alignment. This only applies to child nav ul with the category prop set to "site", it has no effects on other categories.

 string —
  • start, center, end
Page Header Search Panel (page-header-search-panel.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content *

Content of page header search panel. Typeahead or some kind of search input is expected here.

 any —
  • —
Page Header Nav ul (page-header-nav-ul.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
content *

Content of page header nav ul. Nav li are expected here.

 any —
  • —
category

Indicate which set of navigation this nav ul is rendering.

 string —
  • site, related-sites, user
popover_position

Set the position of the nav ul if the parent nav li has the popover prop set to "true". This only applies if the nav ul is a child of a nav li.

 string —
  • edge-start or edge-end
wrap_site_nav_items

Allow the site nav items to wrap once it runs out of available space. This only applies when category is set to "site", it has no effects on other categories.

 boolean false
  • —
Page Header Nav li (page-header-nav-li.twig)
Prop Name Description Type Default Value Option(s)
attributes

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

 object —
  • —
link

Link of the nav li. Passing the "href" attribute will turn it into a semantic link. This prop will be overridden by the content prop.

 object —
    • attributes

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

      • —
    • content

      Content of the link.

      • —
    • desktop_heading

      Indicate if the link should also act as a heading for the children in desktop view. This has no effects in mobile view. This only applies if flat is "false", child nav ul is passed, and its category is set to "site".

      • —
children

Append children for the nav li. Nav ul can be passed here. This must be used in tandem with the link prop.

 any —
  • —
content

Content of the nav li. Use this only if the nav li is not a link, instead it is some kind of layouts such as a card. This prop will override the link prop.

 any —
  • —
current

Set the nav li as the current item. This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
full_width

Set the nav li width to full. This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 boolean false
  • —
view_all

Style the nav li as the "view all" item. This should only be used on "view all" links.

 boolean false
  • —
popover

Indicate if the nav li is a popover. This only applies if nav ul category is set to "related-sites" or "user".

 boolean false
  • —
selected

Set the nav li as the selected item. This only applies if nav ul category is set to "user" and the nav li is rendering the language select.

 boolean false
  • —
flat

Indicate if the nav ul is a flat list (no nesting at all). This only applies if its parent nav ul category is set to "site", it has no effects on other categories.

 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. These properties must be defined at the :root level. --c-bolt-page-header-logo-max-width: At any breakpoint, limit the logo to a specific max-width. This is only effective on long logos, do not use on the plain Pega logo. --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 (top level) to a specific value. Font-size tokens are recommended. Demo
Pega View
Academy View
Community View
Collaboration Center View
SalesHub View
Partners View
PegaWorld 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://google.com',
    }
  },
  subheadline: 'Subheadline text', // This appears next to the logo
  content: primary_nav_and_search_panel,
  secondary_content: secondary_nav,
  cta: cta_button,
  static: true, // Prevents page header from being sticky
  full_width: true, // Sets the width to span the full viewport
  subheadline: 'Subheadline text', // This appears next to the logo
} 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,
  align_site_nav_items: align_site_nav_items, // ['start', 'center', 'end']
} 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']
} 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://google.com/products',
    },
  },
  children: children,
  content: content, // This overrides link and children
  view_all: false, // This is for general "view all" links
  full_width: false, // This is for "view all" and full-width links
  popover: false, // This is for utility nav
  flat: false, // This is for a top level desktop site nav item to render a single level flat dropdown
  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.