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.
--c-bolt-page-header-logo-max-width: At any breakpoint, limit the logo to a specific max-width.
--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 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',
}
},
content: primary_nav_and_search_panel,
secondary_content: secondary_nav,
cta: cta_button,
static: true,
attributes: {
style: '--c-bolt-page-header-logo-max-width: 150px', // Only use the CSS vars on edge cases
},
} 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
full_width: false, // This is for "view all" 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.