Tableau Collapsing Menu Container | Hamburger Menu

1. Objective

In this tutorial for Tableau, we are going to learn Tableau Collapsing menu Container or we can say Tableau Hamburger menu, how to set up Tableau collapsing menu and the various options available to Tableau Collapsible Container.
So, let us start with Tableau Collapsing Menu.

Tableau Collapsing Menu Container | Hamburger Menu

Tableau Collapsing Menu Container | Hamburger Menu

2. Tableau Collapsing Menu

Accessible space for Tableau dashboards can be restricted on cell phones and online journals, so wouldn’t it be decent to have a collapsible region for each one of those speedy channels, legends, explainers or connections? This post will stroll through how to show and conceal a dashboard menu zone without composing any code.
Let’s study Tableau Forecasting – Create & Types of Forecasting in Tableau

3. Dashboard Setup

The overall Dashboard setup in Tableau Collapsing Menu involves 3 main parts:

  • A floating horizontal instrumentality that extends on the far side the boundaries of the dashboard
  • A vertical sub-container for the menu space
  • A vertical sub-container for the mental image

A blank worksheet that may show or hide with action filters. This sheet controls the positioning of different components within the most horizontal instrumentality.

Dashboard setup in Tableau Collapsing Menu | Hamburger Menu

Dashboard setup in Tableau Collapsing Menu | Hamburger Menu

The dashboard size is about to 720 pixels wide to suit this diary post. I positioned the instrumentality with a negative “x” position to make sure the blank sheet is rarely visible. The instrumentality holding the mental image, titles and menu icon is roughly that very same breadth. The menu space fills 0.5 the screen during this example, however, it doesn’t need to.
Read about Tableau Reporting – Tableau Data Analysis Report
The key to filler this layout is to regulate the position and breadth of the most instrumentality so the blank sheet finally ends up filling the quantity of area you would like to point out or hide. It’s additionally vital that the dashboard size is fastened. mechanically resizing the dashboard would destroy this layout.
In my example, the most instrumentality is 1465 pixels wide and therefore the “x” position is -382. The sub-containers square measure 377 and 710 pixels wide, feat 378 pixels for the blank sheet to fill (plus or minus some pixels because of padding). once it disappears, the sub-containers move to the left by that quantity.

4. Laying Out Sub Containers

It’s simple to create covered layouts with drag-and-drop actions in Tableau, however, we want a lot of management over the containers for this. As you build a covered dashboard, Tableau mechanically adds containers for you behind the scenes. What we want to try and do is build the containers one by one.
Let’s discuss Tableau Calculated Fields – Number Function
The diagram below shows, however, the menu instrumentality is structured. It holds 3 horizontal containers (color-coded below) and individual components for text, images, filters, legends and therefore the worksheet we’ll use for the “close” icon.

Laying Out Sub Containers in Tableau Collapsing Menu | Hamburger Menu

Laying Out Sub Containers in Tableau Collapsing Menu | Hamburger Menu

You can manually set the breadth of a vertical sub instrumentality or the peak of a horizontal sub instrumentality. That’s, however, most of the items square measure sized during this dashboard. The KPI read includes a similar setup to rearrange the menu icon next to the title text and show a dynamic column header worksheet.
For those that like floating dashboard components for precise layout management, I actually have dangerous news: Those components can’t dynamically amendment position if they float outside the instrumentality that contains the blank sheet. it’s potential to own multiple containers with slippery content, however overlaying one on prime of another prevents interactivity with the layers sitting beneath.
Tableau Show Me Menu- Part I & Tableau Show Me Menu Part-II

5. Show/Hide Action

Controlling the blank sheet that moves the items left or right is straightforward. we’ve separate worksheets for the “menu” (a.k.a. “hamburger menu”) and “close” icons. These sheets use a knowledge supply with a [Toggle] field containing 2 values: “show” and “hide.” The sheets square measure started this way:

  • Menu icon sheet is filtered to incorporate solely “show”
  • Shut icon sheet is filtered to incorporate solely “hide”
  • The blank sheet uses a replica of the [Toggle] field to incorporate solely “show” from that field. employing a duplicate field ensures the action filter doesn’t have an effect on this choice.

With this setup, the dashboard desires only 1 action that uses the icons because of the supply sheets and therefore the blank sheet because of the target. Set the action to run on choose and leave the filter once clearing the choice, as shown below:

Show/Hide Action in Tableau Collapsing Menu | Hamburger Menu

Show/Hide Action in Tableau Collapsing Menu | Hamburger Menu

6. Conclusion

In this tutorial, we learned about Tableau Collapsing Menu, actions of Collapsing Menu in Tableau with examples, and Laying Out Sub Containers in Tableau Collapsing Menu. This will help us work with Tableau better and do our work more efficiently. Furthermore, if you have any query about Tableau reporting, feel free to ask in a comment section.
Related Topics- Tableau Paged Workbook & Steps to Create it
For reference

No Responses

  1. Janardan Chorat says:

    This is very interesting trick.Any reference tableau workbook will really help

    • Data Flair says:

      Hello Janardan,
      We appreciate your feedback on “Tableau Collapsing Menu Container”, your positive thoughts keep up motivated. Our bloggers refer to a gamut of books, blogs, scholarly articles, and other resources before producing a tutorial to bring you the best. So, you can refer to our Tableau Tutorial for further practice.

Leave a Reply

Your email address will not be published. Required fields are marked *