page header

page header docs

Page Header

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

Published Last updated: 4.0.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://pega.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
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.

      • —
subheadline

Text or other content to display next to the logo.

 any —
  • —
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
  • —
Page Header Primary Nav
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.

 string , array , object —
  • —
Page Header Search Panel
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.

 string , array , object —
  • —
Page Header Nav Ul
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.

 string , array , object —
  • —
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 popover set to "true". This only applies if the nav ul is a child of a nav li.

 string —
  • edge-start or edge-end
flat

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

 boolean false
  • —
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
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 children is passed, nav ul category is set to "site", and nav ul is not flat.

      • —
children

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

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

 string , array , object —
  • —
current

Set the nav li as the current item. This only applies if nav ul category is set to "site".

 boolean false
  • —
full_width

Set the nav li width to full. This only applies if nav ul category is set to "site".

 boolean false
  • —
view_all

Set 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
  • —
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.com 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://pega.com', } }, content: primary_nav_and_search_panel, secondary_content: secondary_nav, cta: cta_button, static: true, 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, } 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 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 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.