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

Simple list

A vertical list with hover/selection styling — links or buttons. Used in sidebars (inbox folders, settings nav) where each item navigates somewhere or selects a primary panel.

Examples

Basic

Flat list — four mail folders. Alpine tracks the active item with pf-m-current.

Grouped

__section with a __title — multiple labelled groups in one list.

Account

Notifications

Email
Push

With links

Anchor items; the active one is current.

Selectable

Clicking moves pf-m-current (PF\u2019s uncontrolled section).

Documentation

Simple list props

Parameters accepted by {#include components/data-display/simple-list ... /}. Model mode: pass list=<SimpleList> built in Java instead — the Java tab on each example shows the builder. The list structure (sections, items, anchors) lives in the slot.

* required
Name	Type	Description
* `id`	String	DOM id on the container.
slot `content`	Qute block	List items — either a flat <ul class="pf-v6-c-simple-list__list"> or one or more <section class="pf-v6-c-simple-list__section"> for grouped lists.

Usage

Use for primary navigation panels. Inbox folders, settings sections, project pickers — anywhere the list represents the user's currently-selected context.

Not for prose lists. For ordered/unordered prose use List; for data with cells use Data list or Table.

Edit simple-list.html on GitHub