Examples
Mixed content
Content area as a flex row: leading text and a primary action, with secondary and tertiary buttons pushed to the trailing edge.
Display inline
displayInline=true — pf-m-display-inline — keeps the brand
and content side-by-side.
Display stack
displayStack=true — pf-m-display-stack — brand and content
rows stack vertically instead of side-by-side.
Display stack, inline responsive
pf-m-display-stack pf-m-display-inline-on-lg — stacked on small viewports, switching to
inline from the lg breakpoint up.
lg breakpoint up — pf-m-display-stack pf-m-display-inline-on-lg. Resize the window to see it switch.Insets
inset="sm" (and responsive pf-m-inset-*-on-* variants)
scales the masthead's inner padding up with the breakpoint.
Custom logo component
The brand __logo rendered as a custom element — an
<a> wrapping a brand image — for router-link integration.
Documentation
Masthead props
Parameters accepted by
{#include components/navigation/masthead ... /}. Model mode: pass
masthead=<Masthead> built in Java instead — the Java tab on each example shows
the builder. In param mode the internal regions (toggle, brand, content) come from the three slots; the Masthead
model generates them directly (most examples here use it).
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id on the <header>. |
displayStack
|
boolean |
Adds pf-m-display-stack.
|
displayInline
|
boolean |
Adds pf-m-display-inline (brand and content side-by-side).
|
inset
|
none | sm | md | lg | xl | 2xl
|
Adds pf-m-inset-{inset} for inner padding.
|
slots toggle / brand /
content
|
Qute block | Nav-toggle button, brand block, and right-side content (toolbar, user menu). |
Usage
Composition. Pair masthead with the page-level layouts (layouts/base,
layouts/sidebar) which already embed the masthead and the nav rail.