# Control Navigation in Flow Screen Components

A flow screen component can control navigation programmatically by dispatching navigation events from the `lightning/flowSupport` module. You can advance to the next screen, go back, pause the flow, or finish it, and you can check which actions are available before firing an event.

## Navigation Events

Import navigation events from `lightning/flowSupport`.

| Event                       | Description                                                                                          |
| --------------------------- | ---------------------------------------------------------------------------------------------------- |
| `FlowNavigationNextEvent`   | Advances to the next screen. If the current screen is the last one, use `FlowNavigationFinishEvent`. |
| `FlowNavigationBackEvent`   | Returns to the previous screen.                                                                      |
| `FlowNavigationPauseEvent`  | Pauses the flow interview and saves its state for later resumption.                                  |
| `FlowNavigationFinishEvent` | Finishes the flow interview and triggers any configured post-flow behavior, such as a redirect URL.  |

## Check Which Actions Are Available

Not every navigation action is available on every screen. For example, the Back action isn't available if the current screen is the first screen, and the Pause action is available only in flows where saving is enabled. Before you fire a navigation event, check whether the corresponding action is available.

Flow Builder passes a list of available actions to your component through the `availableActions` property. Declare it as an `@api` property in your component's JavaScript file.

```javascript
// myComponent.js
import { LightningElement, api } from "lwc";

export default class MyComponent extends LightningElement {
  @api availableActions = [];
}
```

The `availableActions` array contains string values for each action the current screen supports: `"NEXT"`, `"BACK"`, `"PAUSE"`, `"FINISH"`.

Use `availableActions` to show or hide navigation buttons and to guard navigation event dispatches.

```javascript
get canGoNext() {
  return this.availableActions.find((action) => action === "NEXT");
}

get canGoBack() {
  return this.availableActions.find((action) => action === "BACK");
}
```

## Dispatch a Navigation Event

Import the events you need, then dispatch them in event handlers.

```javascript
import { LightningElement, api } from "lwc";
import {
  FlowNavigationNextEvent,
  FlowNavigationBackEvent,
  FlowNavigationPauseEvent,
  FlowNavigationFinishEvent,
} from "lightning/flowSupport";

export default class MyNavigationComponent extends LightningElement {
  @api availableActions = [];

  handleNext() {
    if (this.availableActions.find((action) => action === "NEXT")) {
      this.dispatchEvent(new FlowNavigationNextEvent());
    }
  }

  handleBack() {
    if (this.availableActions.find((action) => action === "BACK")) {
      this.dispatchEvent(new FlowNavigationBackEvent());
    }
  }

  handlePause() {
    if (this.availableActions.find((action) => action === "PAUSE")) {
      this.dispatchEvent(new FlowNavigationPauseEvent());
    }
  }

  handleFinish() {
    if (this.availableActions.find((action) => action === "FINISH")) {
      this.dispatchEvent(new FlowNavigationFinishEvent());
    }
  }
}
```

## Hide the Built-In Footer

When your component provides its own navigation buttons, hide the flow screen's built-in footer so that the screen has only one set of navigation controls. In Flow Builder, open the screen element that contains your component. In the **Configure Footer** section, disable **Show Footer**.

## Navigation Event Guidelines

Follow these guidelines when using navigation events.

- Fire navigation events in event handlers or in methods that an event handler invokes.
- Don't fire navigation events outside of event handlers. Doing so leads to a poor user experience.
- Don't fire navigation events in lifecycle hooks such as `connectedCallback` or `renderedCallback`.
- Avoid firing `FlowAttributeChangeEvent` and a navigation event at the same time. There's no guarantee that the component has rendered updated values before navigation begins, which can cause race conditions.

To improve flow performance, consider these best practices.

- Don't use a dummy screen to perform navigation. It leads to poor flow performance.
- Don't include code after dispatching a `FlowNavigationNextEvent`. Navigation moves the user away from the current screen immediately, so any code after the dispatch doesn't run.

If you encounter a scenario where navigation must be done within the initialization phase of the screen because data isn't yet available to Flow Decision Nodes, post a request for an upgrade in [Idea Exchange](https://ideas.salesforce.com/).

**See Also**

- [Configure a Component for Flow Screens](/docs/platform/lwc/guide/use-config-for-flow-screens.md)
- [Runtime Considerations for Flow Screen Components](/docs/platform/lwc/guide/use-flow-runtime-considerations.md)
- [Best Practices for Reactivity in Screen Flows](/docs/platform/lwc/guide/use-best-practices-reactivity.md)
- [Component Reference: lightning-flow-support](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-flow-support)