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.