steps

Where someone is in a multi-step flow, with finished steps linking back.

Example

Laravel

<x-admin::steps :current="3" :items="[
    ['label' => 'Details', 'href' => '#', 'description' => 'Name and type'],
    ['label' => 'Audience', 'href' => '#', 'description' => 'Who gets it'],
    ['label' => 'Rules', 'description' => 'When it applies'],
    ['label' => 'Review', 'description' => 'Check and publish'],
]" />

Props

PropRequiredDefaultOptions
items[]
current1
labelnull
orientationnullhorizontal, vertical

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Steps } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<nav class="adm-steps" aria-label="Steps" >
    <ol>
                                <li class="adm-steps__item" data-state="done">
                <a class="adm-steps__link"  href="#"  >
                    <span class="adm-steps__mark" aria-hidden="true">
                        <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>                    </span>
                    <span class="adm-steps__text">
                        <span class="adm-steps__label"><span class="adm-sr-only">Completed: </span>Details</span>
                        <span class="adm-steps__description">Name and type</span>                    </span>
                </a>
            </li>
                                <li class="adm-steps__item" data-state="done">
                <a class="adm-steps__link"  href="#"  >
                    <span class="adm-steps__mark" aria-hidden="true">
                        <svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 5 5 9-10"/></svg>                    </span>
                    <span class="adm-steps__text">
                        <span class="adm-steps__label"><span class="adm-sr-only">Completed: </span>Audience</span>
                        <span class="adm-steps__description">Who gets it</span>                    </span>
                </a>
            </li>
                                <li class="adm-steps__item" data-state="current">
                <span class="adm-steps__link"   aria-current="step" >
                    <span class="adm-steps__mark" aria-hidden="true">
                        3                    </span>
                    <span class="adm-steps__text">
                        <span class="adm-steps__label">Rules</span>
                        <span class="adm-steps__description">When it applies</span>                    </span>
                </span>
            </li>
                                <li class="adm-steps__item" data-state="todo">
                <span class="adm-steps__link"  >
                    <span class="adm-steps__mark" aria-hidden="true">
                        4                    </span>
                    <span class="adm-steps__text">
                        <span class="adm-steps__label">Review</span>
                        <span class="adm-steps__description">Check and publish</span>                    </span>
                </span>
            </li>
            </ol>
</nav>