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

Context selector

A dropdown for switching the active context — project, workspace, organization. PF v6's context-selector is a Menu-toggle + searchable Menu combination; ours wires it via Alpine.

Examples

Basic

Toggle reveals action and link items (including disabled ones) plus a scrollable list of contexts, filtered by the search input; an Action button sits in the menu footer. Click an item to swap the toggle label.

Documentation

Context selector props

Parameters accepted by {#include components/navigation/context-selector ... /}. Items live in the slot — each <li> should set selected = '...'; open = false on click.

* required
Name	Type	Description
* `id`	String	DOM id.
* `toggleText`	String	Initial toggle label.
slot `content`	Qute block	Menu items — <li class="pf-v6-c-menu__list-item">.

Usage

HTMX-driven swap. Click handlers should fire hx-post="/switch-context" to swap the page's data behind the new selection.

Edit context-selector.html on GitHub