Live demo — this example is server-driven; run the showcase locally for the interactive version.

Page

The outermost PF v6 shell — masthead + page-main container + main section. Use as the chrome for full apps. The showcase pages all wrap themselves in this structure.

Examples

Basic

Minimal page shell — masthead + main section. Bordered for visibility.

Welcome

Page content lives inside pf-v6-c-page__main. Combine with the Layouts components (Sidebar, Stack, Flex) to structure the body.

Vertical navigation

Full shell — masthead with burger toggle, collapsible sidebar with vertical nav, and three main sections (the middle one pf-m-secondary).

Vertical nav example section 1

Vertical nav example section 2 with secondary variant styling

Vertical nav example section 3

Multiple sidebar body

Two stacked __sidebar-body elements — pf-m-context-selector for a perspective switcher and pf-m-fill for the nav.

The sidebar stacks two pf-v6-c-page__sidebar-body elements — the first with pf-m-context-selector, the second with pf-m-fill to take the remaining height.

Horizontal navigation

Navigation rendered horizontally in the masthead content area instead of a sidebar.

The navigation lives in the masthead content area as a horizontal pf-v6-c-nav pf-m-horizontal — no sidebar.

Uncontrolled navigation

The page shell owns the sidebar state locally (Alpine) — nothing outside reads or sets it, mirroring PF's default-managed sidebar.

The sidebar state is owned entirely by the page shell (local Alpine state) — no outside component controls it. Click the burger to toggle.

Filled page sections

pf-m-fill grows a section to take the available space; pf-m-no-fill keeps it at content height.

Default fill behavior — the section sizes to its content.

pf-m-fill — this section grows to fill the available vertical space.

pf-m-no-fill — this section never grows beyond its content.

Main section padding

Default padding, pf-m-no-padding, and responsive pf-m-padding-on-md.

Section with default padding.

Section with pf-m-no-padding — content runs edge to edge.

Section with pf-m-no-padding pf-m-padding-on-md — padding returns at the md breakpoint.

Main section variations

The page main area accepts typed children — subnav, tabs, breadcrumb, section, and wizard elements each get their own pf-v6-c-page__main-* class.

Element with pf-v6-c-page__main-subnav for horizontal subnav navigation

Element with pf-v6-c-page__main-tabs for tabs

Element with pf-v6-c-page__main-breadcrumb for breadcrumbs

Element with pf-v6-c-page__main-section for main content sections

Element with pf-v6-c-page__main-wizard for wizards

Group section

A pf-v6-c-page__main-group bundles a breadcrumb and a section into one visual unit.

The breadcrumb and this section are wrapped in a single pf-v6-c-page__main-group, so they read as one visual unit.

A separate section outside the group.

Centered section

pf-m-limit-width pf-m-align-center — the section centers once it hits its max width.

When a width-limited page section is wider than the value of --pf-v6-c-page--section--m-limit-width--MaxWidth, the section is centered in the main area (pf-m-limit-width pf-m-align-center).

Plain sections and groups

pf-m-plain removes the background from a section or a whole group; contrast with the default and pf-m-secondary variants.

Plain section — pf-m-plain removes the background color.

Default section with the standard background.

Section inside a pf-v6-c-page__main-group pf-m-plain.

Another section in the same plain group.

Secondary variant section (pf-m-secondary) for contrast.

Dynamic sticky section

pf-m-sticky-top pins the first section while the rest scrolls; height-breakpoint variants make it conditional.

Sticky section (pf-m-sticky-top) — scroll the area below; this stays pinned. Height-based variants like pf-m-sticky-top-on-lg-height make it conditional.

Scrollable content 1

Scrollable content 2

Scrollable content 3

Scrollable content 4

Scrollable content 5

Scrollable content 6

Composable (pure Qute)

The structured slot mode (shell=true): a masthead with a working hamburger, a page-sidebar wired to the same sidebarOpen state, and two page-section bricks — no Java model anywhere.

Section with limited width

A pf-m-fill section growing to fill the remaining main area.

Documentation

Page props

Parameters accepted by {#include components/navigation/page ... /}. Model mode: pass page=<Page> built in Java instead — the Java tab on each example shows the builder. The page-main + page-section structure goes in the slot.

* required
Name	Type	Description
* `id`	String	DOM id on the page wrapper.
slot `content`	Qute block	Page chrome — masthead, sidebar, main, etc.

Usage

Use the layouts. For new apps reach for templates/layouts/base.html or templates/layouts/sidebar.html — they already embed the page shell + masthead + nav.

Edit page.html on GitHub