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
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',
}
},
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://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
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.