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

Navigation

Side-rail navigation for app sections. PF v6 ships flat lists, grouped sections, and expandable trees. The page-layout templates (layouts/sidebar) embed this automatically.

Examples

Vertical

Flat list of links. The active item gets pf-m-current + aria-current="page".

Grouped

Multiple labelled sections inside one nav. Each section has its own __section-title and __list.

Expandable

Items with a nested __subnav. The toggle is a button.pf-v6-c-nav__link; Alpine flips pf-m-expanded plus the hidden / inert attributes on the subnav.

Expandable third level

Subnavs nest — an expandable item inside another item's subnav gives a third level.

Mixed

Plain links and expandable items can share one list.

Horizontal

pf-m-horizontal — for the masthead content area; see the Page component's "Horizontal navigation" example for the full shell.

Horizontal subnav

pf-m-horizontal pf-m-subnav — local (tertiary) navigation under a page header.

With item icons

Each link carries a __link-icon before its __link-text.

Horizontal overflow

pf-m-scrollable horizontal nav with working scroll buttons that disable at the edges.

Composable (pure Qute)

Grouped sections, an expandable subnav, icons and a current item — assembled entirely from the slot-mode shell plus the nav-section, nav-item and nav-item-expandable includes. No Java model: the Qute tab shows everything there is.

Documentation

The runtime template components/navigation/nav has two modes. Pass a typed org.sitenetsoft.quarkus.pha.model.Nav (built with Nav.builder()) as the nav parameter and the whole nav — flat lists, titled groups, expandable subnavs with their Alpine wiring, icons, pf-m-current + aria-current — renders from the model; every example on this page is built this way (the Java tab on each card shows the exact builder call). Or omit it to get the bare shell and hand-write the __item markup in the content slot. The base classes are .pf-v6-c-nav, .pf-v6-c-nav__list, .pf-v6-c-nav__item, .pf-v6-c-nav__link, plus .pf-v6-c-nav__section + .pf-v6-c-nav__section-title for grouping.

Nav nav = Nav.builder()
    .id("side-nav")
    .icon("Dashboard", "/dashboard", "fa:tachometer-alt", true)
    .item("Projects", "/projects")
    .expandable("Reports",
        Nav.item("Usage", "/reports/usage"),
        Nav.item("Billing", "/reports/billing"))
    .build();

Template side, with nav in the template data: {#include components/navigation/nav nav=nav /}. For a grouped nav use .group(title, entries...) calls instead — a nav is either grouped (sections only) or a flat list, and the builder rejects mixing the two. Give the nav an id when it has expandable items so generated toggle ids cannot collide with another nav on the page.

Usage

Server-marked active item. Mark the active link with pf-m-current + aria-current="page" on the server; no client state needed for the nav rail.

Flyout and drilldown. PatternFly's flyout and drilldown nav variants are built on the Menu component rather than nav markup. For equivalent popup-menu patterns see Menu and Custom menus.

Edit navigation example on GitHub