---
schema_version: "1"
id: 7b9c558e91931979ceed11dd4f0699eee5820ef2dd64499643c1d473d3024da8
title: Build a Custom Navigation Model for Your Flow Screens
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-config-for-flow-screens-navigate-custom.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-flow-screens-navigate-custom.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: a4d00a2de807a95422dd326ba8eeeaa80effa96bf0f0f04a690100fd082c99a4
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Build a Custom Navigation Model for Your Flow Screens

Since Aura components have access to a flow screen’s navigation actions, you can fully customize how the user moves between screens. For example, hide the default navigation buttons and have the flow move to the next screen when the user selects a choice. The `c:choiceNavigation` component displays a script and a choice in the form of buttons.

![A flow screen that has no navigation buttons. Instead, the body of the screen has Yes and No buttons.](https://developer.salesforce.com/media/aura-platform/flow_nonav.png)

## c:choiceNavigation Component

```nolang
<aura:component implements="lightning:availableForFlowScreens" access="global" >
   <!-- Get the script text from the flow -->
   <aura:attribute name="scriptText" type="String" required="true" />
   <!-- Pass the value of the selected option back to the flow -->
   <aura:attribute name="value" type="String" />

   <!-- Display the script to guide the agent's call -->
   <div class="script-container">
      <div class="slds-card__header slds-grid slds-p-bottom_small slds-m-bottom_none">
         <div class="slds-media slds-media_center slds-has-flexi-truncate" >
            <div class="slds-media__figure slds-align-top">
               <h2><lightning:icon iconName="utility:quotation_marks"
                  title="Suggested script" /></h2>
            </div>
            <div class="slds-media__body">
               <ui:outputRichText class="script" value="{!v.scriptText}"/>
            </div>
         </div>
      </div>
   </div>
   <!-- Buttons for the agent to click, according to the customer’s response -->
   <div class="slds-p-top_large slds-p-bottom_large">
      <p><lightning:formattedText value="Customer Response"
         class="slds-text-body_small" /></p>
      <lightning:buttongroup >
         <lightning:button label="Yes" aura:id="Participate_Yes"
            variant="neutral" onclick="{!c.handleChange}"/>
         <lightning:button label="No" aura:id="Participate_No"
            variant="neutral" onclick="{!c.handleChange}"/>
     </lightning:buttongroup>
   </div>
</aura:component>
```

## c:choiceNavigation Design

The design resource includes the `scriptText` attribute, so you can set the script from the flow.

```nolang
<design:component>
   <design:attribute name="scriptText" label="Script Text"
      description="What the agent should say to the customer" />
</design:component>
```

## c:choiceNavigation Style

```nolang
.THIS.script-container {
   border: t(borderWidthThick) solid t(colorBorderBrand);
   border-radius: t(borderRadiusMedium);
}

.THIS .script {
   font-size: 1.125rem; /*t(fontSizeTextLarge)*/
   font-weight: t(fontWeightRegular);
   line-height: t(lineHeightHeading);
}
```

## c:choiceNavigation Controller

When the user clicks either of the buttons, the JavaScript controller calls `navigateFlow(“NEXT”)`, which is the equivalent of the user clicking **Next**.

```javascript
({
  handleChange: function (component, event, helper) {
    // When an option is selected, navigate to the next screen
    var response = event.getSource().getLocalId();
    component.set("v.value", response);
    var navigate = component.get("v.navigateFlow");
    navigate("NEXT");
  },
});
```

## defaultTokens.tokens

The script in `c:choiceNavigation` uses tokens to stay in sync with the Salesforce Lightning Design System styles.

```nolang
<aura:tokens extends="force:base" >
</aura:tokens>
```

**See Also**

- [_Component Library_: lightning:availableForFlowScreens Interface](https://developer.salesforce.com/docs/component-library/bundle/lightning:availableForFlowScreens/documentation)