Rendering navigation | laravel-livewire-wizard | Spatie

 SPATIE

  Laravel Livewire Wizard
==========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-livewire-wizard](https://spatie.be/docs/laravel-livewire-wizard/v2)  Usage  Rendering navigation

 Version   v2   v1

 Other versions for crawler [v2](https://spatie.be/docs/laravel-livewire-wizard/v2) [v1](https://spatie.be/docs/laravel-livewire-wizard/v1)

- [ Introduction ](https://spatie.be/docs/laravel-livewire-wizard/v2/introduction)
- [ Support us ](https://spatie.be/docs/laravel-livewire-wizard/v2/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-livewire-wizard/v2/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-livewire-wizard/v2/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-livewire-wizard/v2/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-livewire-wizard/v2/changelog)
- [ About us ](https://spatie.be/docs/laravel-livewire-wizard/v2/about-us)

Usage
-----

- [ Creating your first wizard ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/creating-your-first-wizard)
- [ Navigating steps ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/navigating-steps)
- [ Rendering navigation ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/rendering-navigation)
- [ Accessing state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/accessing-state)
- [ Setting initial state ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/setting-initial-state)
- [ Testing wizards ](https://spatie.be/docs/laravel-livewire-wizard/v2/usage/testing-wizards)

 Rendering navigation
====================

###  On this page

1. [ Available methods ](#content-available-methods)
2. [ Adding extra info to a step ](#content-adding-extra-info-to-a-step)

Any step component has a `$steps` property that contains an array containing information on all steps in the wizard. You can use `$steps` to build any navigation you want. Here's an example:

```
{{-- somewhere in a Blade view--}}

    @foreach($steps as $step)
        isPrevious())
                wire:click="{{ $step->show() }}"
            @endif
        >{{ $step->label }}
    @endforeach

```

Available methods
-----------------------------------------------------------------------------------------------------------

Each entry in the array contains an instance of `Spatie\LivewireWizard\Support\Step`. It has these methods:

- `isCurrent()`: returns `true` if this step is currently being displayed
- `isPrevious()`: returns `true` if this step comes before the step that's currently displayed
- `isNext()`: returns `true` if this step comes after the step that's currently displayed
- `show()`: return the string that can be passed to `wire:click` to show the step

Adding extra info to a step
-----------------------------------------------------------------------------------------------------------------------------------------

In the example above, you see that we've used `$step->label` to render the content of the ``. That `label` property isn't available by default.

You can add any property on a step by adding a `stepInfo` method your `Step` component. That method should contain an array with properties regarding your step.

```
// in your step component

public function stepInfo(): array
{
    return [
        'label' => 'Your cart',
        'icon' => 'fa-shopping-cart',
    ];
}
```

Any key you return will be available as a property on step.

```
$step->label; // returns 'Your cart'
$step->icon; // returns 'fa-shopping-cart'
```