JumpList

Purpose

The elements of a wizard, to jump to one already seen: a disclosure that says how many there are and how many remain, and one button per element.

When to use, when not

Use it in a wizard with several elements, under the header. Not for a list of one, and not for the criteria, which is CriteriaRecap.

Anatomy

1. The disclosure, titled by the summary.
2. An ordered list of buttons: the drawing, the rank, the label.

Props

Props of JumpList

Name	Type	Default	What it does
items	Item[]
current	number
onjump	(index: number) => void
summary	string		The disclosure's title: what the list holds, "12 éléments, 3 restants".
open?	boolean	false	Open at first; closed by default so the list never buries the question. Bindable.
class?	string	''	Layout classes only.

States

Closed, and open with the current element and every status.

closed

Closed by default: the question stays in sight.

Light

5 éléments, 1 sans réponse

Dark

5 éléments, 1 sans réponse

320 px, light

5 éléments, 1 sans réponse

320 px, dark

5 éléments, 1 sans réponse

216 px, light

5 éléments, 1 sans réponse

Forced colours, captured

open

Every status the list can show, the current element underlined and named as such. A jump says which element it asked for, by its rank in the collect and not by the figure on the button.

Light

5 éléments, 1 sans réponse

1. 1 Logo de la boutique
2. 2 Photo du produit
3. 3 Icône du panier
4. 4 Bannière de la promotion
5. 5 Vignette de l’article suivant

Dark

5 éléments, 1 sans réponse

1. 1 Logo de la boutique
2. 2 Photo du produit
3. 3 Icône du panier
4. 4 Bannière de la promotion
5. 5 Vignette de l’article suivant

320 px, light

5 éléments, 1 sans réponse

1. 1 Logo de la boutique
2. 2 Photo du produit
3. 3 Icône du panier
4. 4 Bannière de la promotion
5. 5 Vignette de l’article suivant

320 px, dark

5 éléments, 1 sans réponse

1. 1 Logo de la boutique
2. 2 Photo du produit
3. 3 Icône du panier
4. 4 Bannière de la promotion
5. 5 Vignette de l’article suivant

216 px, light

5 éléments, 1 sans réponse

1. 1 Logo de la boutique
2. 2 Photo du produit
3. 3 Icône du panier
4. 4 Bannière de la promotion
5. 5 Vignette de l’article suivant

Forced colours, captured

Accessibility contract

• Role and name: the disclosure’s button names the list; each item is a button named “3. Photo du produit, non conforme”, “élément courant” added on the current one, which also carries aria-current="true".
• Keyboard, focus: the disclosure’s button, then the items when open. The list is marked data-raccourcis="off": the wizard’s shortcut listener leaves arrow keys alone inside it.
• Live regions: none.

Content rules

French. The summary counts elements and what remains (“12 éléments, 3 sans réponse”); the labels are the elements’ own words, cut by the ellipsis on screen and whole in the name.

Do and don’t

• Do keep it closed by default: open, it buried the question under a long list.
• Do not put the jump list in the footer; it sits under the header, with the recap.

Examples

<JumpList items={items} current={index} onjump={goTo} summary="12 éléments, 3 sans réponse" />

Surfaces

• Extension: every inventory wizard.

Related

Disclosure, CriteriaRecap, ResumeBanner.

Decisions

• 2026-09-26: on Disclosure rather than a bare details element, so the button and the panel are the package’s; the data-raccourcis="off" mark is the wizard shortcut contract, documented on use:shortcuts.

Criteria held by construction

• 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
  One real button per element, named by its rank, its label and its status, with aria-current on the current one.
• 12.8, Dans chaque page web, l'ordre de tabulation est-il cohérent ?
  Collapsed by default under a disclosure, the list never separates the question from its answers in the tab order.
• 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
  The status is in the button's name and drawn by the icon; the current element is a line and the bold, not a hue.

Tokens it reads

• Colour: --rl-c, --rl-derogation, --rl-hover, --rl-ink, --rl-ink-soft, --rl-nc
• Typography: --rl-font-mono, --rl-weight-bold, --rl-text-sm, --rl-text-xs
• Spacing: --rl-space-1-5, --rl-space-2