top of page
  • Writer's pictureChris

Add a Visual Menu to Flow Builder

Updated: Jan 22, 2020

I recently wanted to add a more visually appealing and user-friendly way to add navigation to my flows. The goal was to allow end-users to select an option quickly, and the flow automatically navigates to the next screen. I used a picklist in the past, but that resulted in extra clicks.

Benefits over a picklist

  1. Come on, it just looks better!

  2. Fewer clicks (1 click vs 3 clicks)

  3. Faster!

  4. Very flexible.


  1. Collection - Label - The labels used for each of the buttons

  2. Collection - SubLabel - The sub-labels used for each of the buttons.

  3. Collection - Value - The values used for each of the buttons.

  4. Collection - Icons - The icons used for each of the buttons.

  5. Show Icons? - A boolean to show the icons. The default is false.

  6. Show SubLabels? - A boolean to show the icons. The default is false.

  7. Icon Size - The size of the icon. Options include xx-small, x-small, small, medium, or large. The default is medium.

  8. Required - A boolean to determine if a selection is required to go to the next screen.

  9. Enable Auto Next - If enabled the screen will automatically transition to the next element. Please note there is an accessibility impact when enabling this option. If a user utilizes a keyboard or screen reader that will be unable to get to any other choice but the first.

Please Note

Collection - Label , Collection - SubLabel , Collection - Value and Collection - Icons are required. If you do not plan to use SubLabels or Icons just input the string collection you are utilizing for Collection - Label.


  1. Label - Output the selected label

  2. SubLabel - Output the selected sub-label

  3. Value - Output the selected value

  4. Unique - Output the selected value + its index #

This component allows you to out the selected label, sublabel, and value. Therefore, you will be able to use the outputs on a decision element for navigation!

How to generate the menu

  1. Create a text variable that allows multiple values (collection). You will need one for labels, sub-labels, icons, and values.

  2. Then use an assignment element to add values to the collection

You can also combine this with Extract Strings From Collection from Imagine searching for Contacts and then visually displaying the results to the end-user.

I hope this component adds value to your visual flows! Visual Nav is a lightning web component. Therefore, if you haven't created a Lightning Web Component previously I would recommend completing the following Trailhead: Build Lightning Web Components




1,338 views6 comments

Recent Posts

See All


Yamini Mac
Yamini Mac
May 24, 2023

getting error while deploymenyt .. The 'outputLabel' property doesn't exist on the component


Chris V
Chris V
Feb 05, 2020

Justin, I added the ability to adjust the menu size. Please see:


Feb 01, 2020

Justin, that is a good idea. I will look into adding custom sizes.


Justin Baker
Justin Baker
Jan 30, 2020

I aboslutely love this component, so thank you very much for it!

Is there any chance of having support for tile sizes added? I like being able to specify the icon sizes, but having the ability to change the size of the tiles would be like game changing for me.


Chris V
Chris V
Jan 27, 2020

It does not currently support automatic pagination. It is on my list of features to figure out. It does use lightning layout so it should start wrapping to the next row for larger list. However, if you want to limit the number of records to show at once I would recommend doing manual pagination with your flow. For example, I made "Show More" an option, and then used a decision to add and remove additional menu options.

bottom of page