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

Navigation

Use Navigation straight from a Qute template — parameters and slots instead of Java builders. This reference is generated from the runtime template sources: each template documents its parameters and slots in the header comment shown beneath its include line.

Templates

nav

{#include components/navigation/nav /}

Navigation — PatternFly v6 (pf-v6-c-nav) 
 Two modes.
   Model-driven: pass nav=<org.sitenetsoft.quarkus.pha.model.Nav> (built via Nav.builder()) and the
     full markup — sections, expandable subnavs with Alpine wiring, icons, aria — renders from the model.
   Slot shell: omit nav and supply the <li> items yourself through the content slot —
     compose nav-item / nav-item-expandable includes (or hand-written <li>s).
     Shell params (all optional): id — DOM id on the root; horizontal; ariaLabel;
     currentPath — marks active item; grouped — the shell renders no list of its own,
     the {#sections} slot supplies nav-section includes instead of the content slot.

nav-item

{#include components/navigation/nav-item /}

Nav item — one <li><a> entry for the nav component's slot mode (pure Qute, no model). 
 Required: href, label. 
 Optional: icon ("set:slug") — leading link icon; current — marks the active item (pf-m-current + aria-current).

nav-item-expandable

{#include components/navigation/nav-item-expandable /}

Expandable nav item — parent <li> with the Alpine toggle + subnav list (pure Qute, no model). 
 Required: label; toggleId — DOM id on the toggle button (aria-labelledby target for the subnav). 
 Optional: expanded — initially open (default false). 
 Slot: {#subnav} — the child <li> entries; compose nav-item (or nested nav-item-expandable) includes.

nav-section

{#include components/navigation/nav-section /}

Nav section — one grouped-nav block (title + its list) for the nav component's grouped slot mode. 
 Required:
title. 
 Slot: {#items} — the section's list-item entries; compose nav-item / nav-item-expandable includes.