How To Build Collapsible Menus In Tableau

Collapsible menus can be helpful in organizing and presenting menu options in a more visually-appealing and interactive way. They allow users to hide and show different levels of detail in a dashboard, making it easier to focus on specific aspects of the data and allowing for a more streamlined and efficient analysis experience.

In this blog, we’ll show you step-by-step of how to build collapsible menus in Tableau.

What Is A Collapsible Menu?

A collapsible menu, also known as a drop-down menu or accordion menu, is a user interface element that allows users to hide and show content within a website or application. It is typically implemented as a vertical list of items, each of which can be expanded or collapsed by clicking on a button or link.

Collapsible menus are often used to organize and present large amounts of content in a more aesthetic and efficient way. They allow users to focus on specific content areas by hiding the rest, making it easier to navigate and find the information they are looking for.

Collapsible menus are commonly used in web design and development, but they can also be found in other types of software and applications, such as in data visualization tools like Tableau.

If you’re completely new to Tableau, check out the beginner’s Tableau tutorial.

How To Build A Collapsible Menu

For this tutorial, we’re going to show you how to recreate parts of the collapsible menu on the left of the image below.

There are several key features to note:

Each section of data is divided out
Rather than expanding or collapsing only a single level, this example expands or collapses any selected level
Within each level, you can also select specific values

Step 1: Prepare Your Data

First we need to create the data that we’ll use to build the navigation. This dataset is basic but necessary for helping us construct the menu.

Create a csv or xlsx file that has a single column called Placeholder. Number from 1 to 40 in different rows. If you need a bigger menu, you could add more values.

When you are done and have saved the data source, connect to the data source in Tableau.

Step 2: Build The Foundational Calculations

There are four foundational calculations you need:

A calculation for the expanding/collapsing arrow
A calculation for the icons
A calculation that groups sections of the expanding/collapsible menu
Labels for each row

Step 2a: Create Labels For Each Row

Let’s first get our labels created. For every row in our csv we created, we’re going to assign a specific label. Some of these are titles for sections (Overview, Region, Date, Segment) and the remainder are values we’ll want to be able to select from the menu.

Create a calculation called [Labels]:

				
					CASE [Placeholder]
WHEN 1 THEN "Overview"
WHEN 2 THEN "Sales"
WHEN 3 THEN "Orders"
WHEN 4 THEN "Profit"
WHEN 5 THEN "Region"
WHEN 6 THEN "West"
WHEN 7 THEN "South"
WHEN 8 THEN "Central"
WHEN 9 THEN "East"
WHEN 10 THEN "Date"
WHEN 11 THEN "Year-to-date"
WHEN 12 THEN "Last Quarter"
WHEN 13 THEN "Last Month"
WHEN 14 THEN "Last Week"
WHEN 15 THEN "Segment"
WHEN 16 THEN "Consumer"
WHEN 17 THEN "Corporate"
WHEN 18 THEN "Home Office"
END

Step 2b: Group The Labels

Let’s group the labels by each section. Create a calculation called [Group]:

				
					CASE [Placeholder]
WHEN 1 THEN "Overview"
WHEN 2 THEN "Overview"
WHEN 3 THEN "Overview"
WHEN 4 THEN "Overview"
WHEN 5 THEN "Region"
WHEN 6 THEN "Region"
WHEN 7 THEN "Region"
WHEN 8 THEN "Region"
WHEN 9 THEN "Region"
WHEN 10 THEN "Date"
WHEN 11 THEN "Date"
WHEN 12 THEN "Date"
WHEN 13 THEN "Date"
WHEN 14 THEN "Date"
WHEN 15 THEN "Segment"
WHEN 16 THEN "Segment"
WHEN 17 THEN "Segment"
WHEN 18 THEN "Segment"
END

Step 2c: Build The Icons Calculation

Create a calculation called [Icon Placeholder] and type MIN(0.0).

Step 2d: Build The Arrow Calculation

Create a calculation called [Arrow Placeholder] and type.

				
					IF [Labels] = [Group]
THEN 1.0
END

This will be used to place the arrows.

Step 2e: Build The Menu Icon Calculation

Create a calculation called [Shape]:

				
					IF [Labels] = [Group] 
THEN [Labels] 
END

We’ll edit this calculation later and add more to it.

Step 3: Build The Foundations Of The Collapsible Menu

Add [Group] to the filter shelf and deselect Null.
Place [Group] on the rows shelf.
Sort [Group] ascending by [Placeholder], the name of the column in our original data set.
Add [Placeholder] to the right of [Group] on the rows shelf.
Add [Icon Placeholder] to the columns shelf. Change the mark type to Shape.
Add [Labels] to Label on the marks card.
Add [Shape] to Shape on the marks card.
Add [Arrows Placeholder] to the right of [Icon Placeholder] on the columns shelf.
Set the mark type to shape.
Create a dual-axis chart and synchronize the axes between [Arrows Placeholder] and [Icon Placeholder].
Set the axis to run from -0.2 to 1.15.
Hide the axis.
Format the worksheet and add column and row dividers. Set the row dividers to show up at the Group level. Remove any other lines or shading.

Your menu will look like this, so far:

For the remainder we need to format and add interactivity.

Step 4: Build The Calculations For Interactivity

We have a lot of interactivity to build. We need to be able to expand and contract the menu and we also need to be able to select values out of the menu, too.

Step 4a: Build Helper Calculations

To support the interactivity, we are going to build two useful calculations.

Let’s build a calculation called [Padded Placeholder]:

				
					IF LEN(STR([Placeholder])) = 1
THEN "0" + STR([Placeholder])
ELSE STR([Placeholder])
END

This calculation adds a 0 in front of all single-digit values. We’ll eventually use this field in a parameter. The padding is important because it allows us to return specific values and not duplicates.

Let’s also build another calculation called [PP | Group] (PP is short for Padded Placeholder):

				
					{FIXED [Group] : MIN([Padded Placeholder])}

Step 4b: Create String Parameters That Will Support Interactivity

Create both string parameters, seting the default value to an empty string (no value in the string).

Call the first parameter [Group Parameter].

Call the second parameter [Placeholder Parameter].

Remember that these will need to be empty string parameters.

Step 4c: Create Calculations To Update The Parameters With A Parameter Action

Create a calculation called [Group Update] that will update the Group Parameter when we add a parameter action (we’ll add the action later):

				
					IF [Padded Placeholder] = [PP | Group]
AND CONTAINS([Group Parameter], [PP | Group] + ", ")
THEN REPLACE([Group Parameter], [PP | Group] + ", ", "")
ELSEIF [Padded Placeholder] = [PP | Group]
AND NOT CONTAINS([Group Parameter], [PP | Group] + ", ")
THEN [Group Parameter] + [PP | Group] + ", "
END

Add the [Group Update] calculation to the detail of both marked cards.

Create a second calculation called [Placeholder Update] that will eventually update the Placeholder Parameter.

				
					IF [Padded Placeholder] != [PP | Group]
AND CONTAINS([Placeholder Parameter], [Padded Placeholder] + ", ")
THEN REPLACE([Placeholder Parameter], [Padded Placeholder] + ", ", "")
ELSEIF [Padded Placeholder] != [PP | Group]
AND NOT CONTAINS([Placeholder Parameter], [Padded Placeholder] + ", ")
THEN [Placeholder Parameter] + [Padded Placeholder] + ", "
END

Add the [Placeholder Parameter] to detail on the Icon Placeholder marks card.

Create a second calculation called [Placeholder Update] that will eventually update the Placeholder Parameter.

				
					IF [Padded Placeholder] != [PP | Group]
AND CONTAINS([Placeholder Parameter], [Padded Placeholder] + ", ")
THEN REPLACE([Placeholder Parameter], [Padded Placeholder] + ", ", "")
ELSEIF [Padded Placeholder] != [PP | Group]
AND NOT CONTAINS([Placeholder Parameter], [Padded Placeholder] + ", ")
THEN [Placeholder Parameter] + [Padded Placeholder] + ", "
END

Add the [Placeholder Parameter] to detail on the Icon Placeholder marks card.

Step 4d: Add Parameter Actions To The Worksheet

In your top menu go to Worksheet >> Actions. Add a new parameter action.

Call the parameter action Update Group. On the sheet target Group Parameter and use the [Group Update] field as the source field. Run the action on select. Make sure clearing the action will keep the current value.

Add a second parameter action. Call the parameter action Update Placeholder. On the sheet, target Placeholder Parameter and use the [Placeholder Update] field as the source field. Run the action on select. Make sure clearing the action will keep the current value.

Step 4e: Make The Menu Interactive

Create a new calculation called [Group | TF]:

				
					[Padded Placeholder] = [PP | Group]
OR
CONTAINS([Group Parameter], [PP | Group])

Place [Group | TF] on the filters shelf and select True.

Step 4f: Make The Arrows Dynamic

Create a calculation called [Arrows | TF]:

				
					CONTAINS([Group Parameter], [PP | Group])

On the Arrows Placeholder marks card add [Arrows | TF] to shape.

Step 4g: Update The [Shape] Calculation

Update the [Shape] calculation to the following:

				
					IF [Padded Placeholder] = [PP | Group]
THEN [Labels] 
ELSEIF [Padded Placeholder] != [PP | Group]
AND CONTAINS([Placeholder Parameter], [Padded Placeholder])
THEN "Active"
END

This will change icons for the selected values.

Step 4h: Create Dynamic Labels

Create a calculation called [Labels | Active]:

				
					IF [Padded Placeholder] = [PP | Group]
OR CONTAINS([Placeholder Parameter], [Padded Placeholder])
THEN [Labels]
END

Create another calculation called [Labels | Inactive]:

				
					[Labels | Inactive]
IF NOT([Padded Placeholder] = [PP | Group]
OR CONTAINS([Placeholder Parameter], [Padded Placeholder]))
THEN [Labels]
END

On the Icons Placeholder marks card, drag [Labels | Inactive] and replace [Labels]. Additionally, add [Labels | Active] to the labels on the marks card. Click Label, then “…”. Place the two measures on the same line. Bold Labels | Active.

The result thus far is this:

Step 5: Update The Shapes

We’re almost there! We just need to update the shapes.

Step 5a: Structure Your Shapes Folder

To do this, go to the My Tableau Repository folder on your computer. Then open the Shapes folder. In there you’ll have a number of folders. Create a new folder called Menu Shapes. Add the following shapes (you can do your own customizations later).

Step 5b: Update The Shape Marks On The Arrows Placeholder Marks Card

Click on the arrows placeholder marks card then click Shape on the marks card. This will update the shapes associated with [Arrows | TF], the field we have on shape type.

Press the Reload Shapes button.

Then set the false values to the arrow down and the true to the arrows up from our Menu Shapes folder.

Step 5c: Update The Shape Marks On The Icons Placeholder Marks Card

Edit the shape on the Icons Placeholder marks card. This will update fields associated with the [Shape] calculation.

Set Null to the transparent shape
Set Active to the black dot shape
Set Overview to the home icon
Set Region to the person icon
Set Date to the green price icon
Set Segment to the orange shopping cart icon

Step 5d: Resize The Marks

Create a calculation called [Size]:

				
					IF [Shape] = "Active"
THEN .25
ELSE 1
END

Place [Size] on the Size button on the Icons Placeholder marks card.

Results

The final result is:

The final result on a dashboard looks like the following:

In this example, the width of the menu is set to 230 pixels. When you place it on the dashboard be sure to fix the width, but not the height. Otherwise, it won’t collapse appropriately.

How Do You Use The Values Selected On The Menu?

There are a number of ways to use the values selected on the menu. In the example above, we’ve created additional calculations for each menu item.

Zone Visibility

If you select values, then use Zone Visibility, a different chart type will show up. If someone selects sales I have a specific calculation called [Sales Zone] where the calculation is:

				
					CONTAINS([Placeholder Parameter], “02, “)

I then use this calculation on zone visibility to show the appropriate section.

Changing Level Of Detail In Calculations

While this example focused exclusively on zone visibility, you could also work out your calculations so that you could just update the level of detail of a calculation. The best place to do this in this example would be with the dates section.

Without writing a full blog about it, the way that I would do this is:

Create a new string parameter called Dates Parameter.
Set the values to be fixed to either “11”, “12”, “13”, or “14”–the underlying padded placeholder values.
Change the logic of the Active/Inactive labels so only one date value can be selected.
Write a case statement utilizing the Dates Parameter that looks something like this:

				
					CASE [Dates Parameter]
WHEN “11” THEN <Insert a YTD calculation>
WHEN “12” THEN <Insert a Quarter calculation>
WHEN “13” THEN <Insert a Monthly calculation>
WHEN “14” THEN <Insert a weekly calculation>
END

Conclusion

Creating a collapsible menu is a lot of work, but when you have it available to your end users, you are able to really provide far more options than a standard drop-down menu or selection of a parameter. The most important part of creating a collapsible menu is to remember what data you are trying to streamline for your end users.

If you want more information on creating visuals in Tableau, check out our how-to blog posts on gauge charts and multiple measure waterfall charts.

Please note: The solution presented in this blog post about collapsible menus uses many of Tableau’s current and new features released in 2022.