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
Pega (logged out) View
Academy View
Collaboration Center View
Community View
Documentation View
Partners View
PegaWorld View
SalesHub View
Twig
// Reference each template's schema to learn about each props.

// The main template
{% include '@bolt-components-page-header/page-header.twig' with {
  logo: {
    image_src: '/images/content/logos/pega-logo.svg',
    label: 'Pegasystems',
    attributes: {
      href: 'https://google.com',
    }
  },
  subheadline: 'Subheadline text',
  content: primary_nav_and_search_panel,
  secondary_content: secondary_nav,
  cta: cta_button,
  static: true,
  full_width: true,
} 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,
} 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,
  popover_position: popover_position,
} 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',
    counter: true,
    signifier_before: icon_before,
    signifier_only: icon_only,
    attributes: {
      href: 'https://google.com/products',
    },
  },
  children: children,
  content: content,
  view_all: false,
  full_width: false,
  popover: false,
  flat: false,
  selected: false,
  current: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.