Navigating steps | 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/v1)  Usage  Navigating steps

 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/v1/introduction)
- [ Support us ](https://spatie.be/docs/laravel-livewire-wizard/v1/support-us)
- [ Requirements ](https://spatie.be/docs/laravel-livewire-wizard/v1/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-livewire-wizard/v1/installation-setup)
- [ Questions and issues ](https://spatie.be/docs/laravel-livewire-wizard/v1/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-livewire-wizard/v1/changelog)
- [ About us ](https://spatie.be/docs/laravel-livewire-wizard/v1/about-us)

Usage
-----

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

      You are viewing the documentation for **an older version** of this package. You can check the version you are using with the following command:

 `                                    composer show spatie/laravel-livewire-wizard                                                                                                                                                                                                                                    `

Navigating steps
================

###  On this page

1. [ Navigating to the next step ](#content-navigating-to-the-next-step)
2. [ Navigating to the previous step ](#content-navigating-to-the-previous-step)
3. [ Showing any step ](#content-showing-any-step)
4. [ Start at a specific step ](#content-start-at-a-specific-step)

There are various methods to navigate from one step to another. When switching steps we'll take care to preserve and restore state.

Navigating to the next step
-----------------------------------------------------------------------------------------------------------------------------------------

You can navigate to the next step, using `nextStep`. You can call that method anywhere in your step component.

```
// somewhere in your step component

$this->nextStep();
```

You can also call it in your view.

```

    Go to the next step

```

Navigating to the previous step
-----------------------------------------------------------------------------------------------------------------------------------------------------

You can navigate to the previous step, using `previousStep`. You can call that method anywhere in your step component.

```
// somewhere in your step component

$this->previousStep();
```

You can also call it in your view.

```

    Go to the previous step

```

Showing any step
--------------------------------------------------------------------------------------------------------

To show any step, call `showStep` and pass it the component name of the step you want to show.

```
// somewhere in your step component

$this->showStep('confirm-order-step');
```

You can also call it in your view.

```

    Go to the confirm order step

```

You can also check if a next or previous step exists directly from the step component.

```
$this->hasNextStep();
$this->hasPreviousStep();
```

Start at a specific step
--------------------------------------------------------------------------------------------------------------------------------

If you want the wizard to display a specific step when it is rendered first, you can pass the step name to the `show-step` property.

```

```