Create Multistep Navigation With Current Step Indicator Alpinejs

This post relies on the solution given by TallTips. Although I was not building the same component as this, but this was a great tip to build my own solution.

First up, define your data at the root div. We have defined a data focus; such that whenever the navigational link corresponding to a focus is clicked, the div having that paricular focus would show up.

x-data="{ focus: '#tab{{ $form->first()->name }}' }

Note: Here, we have assigned a default value to focus which is the name field of the first record.

Second, let us create the navigational link mentioned earlier. Here the link will use x-on:click.prevent to set the value of the property focus to form to which the link corresponds to. For example, the below link shows some sort of palette. The name of the form is colors and so would be name of the div containing this form. The link text is same too.

<a 
    class="px-3 py-1.5 mx-1 text-sm rounded-full bg-black text-white hover:bg-teal-400" 
    href="#" 
    x-on:click.prevent="focus='#tab{{ $form->name }}'"
    :class="{ 'bg-teal-400': focus === '#tab{{ $form->name }}' }"
>
    {{ $form->name }}
</a>

Note: Here, we are using x-bind:class to change the background color of the navigational link if it is “active”.

Third, let us create the containers for the forms. Each of our div's would contain a form. Each of the form is being rendered from the property ($form->body) that is passed to the Liwewire component.

@foreach ($forms as $form)
    <div x-show="focus == '#tab{{ $form->name }}'" x-cloak>
        <span>{{ $form->body }}</span>
    </div>
@endforeach