Can we build tab-style navigation buttons and dropdown filters in a dashboard?

I am building a dashboard and would like to confirm whether the layout in the attached mockup image can be created using Amazon QuickSight.

What I want to build:

  1. Tab-style navigation buttons at the top of the dashboard

    • Five pill-shaped buttons: Summary, Metric, Customer, Business, Reports
    • Clicking a button should switch to a different page or view
    • The selected button should be highlighted in a different color (blue in the mockup)
  2. A row of dropdown filters below the tabs

    • Filters: Region, Country, Fiscal Year, Department, Account Type, Currency, Cost Center

Hi @saurabh.pawar and welcome back to the Quick Community!

I do believe this is possible, but it may not look exactly like your mockup image. For your tab-style navigation buttons, this can be done a few different ways. The key factor is that whatever route you take, needs to support navigation actions since you would like the user to click on a tab and that takes the user to its respective sheet. Right now, the easiest options to support that is to either go the image route or a table cell route. You can have each tab be its own image that you upload to the analysis, and you can make it look exactly how you want with the addition of allowing the user to transition between sheets from it. Another option is to create the buttons through a table visual. To do this, you are going to make a calc field for every tab option, and the calc field is simply going to be the name that us surrounded by quotations (i.e. ‘Metric’). Then you are going to put that calc field into a table visual and essentially turn off everything, so it is only the table cell that is visual (turn off title, subtitle, header, etc.). Unlike the image option, this route will only have the tab buttons to be rectangular shaped, but it is an easy way to achieve buttons in Quick Sight.

For your dropdown filters, you are simply going to make sure your sheet layout is set to ‘Free-form’. To double check, you can view the sheet layout within the sheet settings (Edit → Analysis Settings → Sheet Settings). After that, it will give you the option to move the filter control inside the sheet and that will give you the flexibility to place it anywhere within the analysis sheet such as right below the tabs.

Hope this helps and let me know if you have any additional questions!

Hi Jacob, thanks! I tried uploading the image to the dashboard, and it looks good overall. However, while refreshing the dashboard, there is a slight ~1-second delay before the image loads. This looks a bit off, as the other visuals and text boxes load perfectly fine without any noticeable delay.

I’ve attached a snapshot below for your reference, showing the slight delay in loading the uploaded image.
Could you please help us understand if there is a way to resolve or minimize this loading delay?

Hi Jacob,

Also, regarding the filters, is it possible to change the background colour from white to grey inside filter selection and make the filter look similar to the one shown in Snapshot 2?

Snapshot 1: Current AWS Dashboard
Snapshot 2: My required filter design

Hi @saurabh.pawar ,

On the image delay, that lag is expected and comes down to how Quick Sight loads uploaded images. Your SPICE-backed visuals and text boxes render from cached data as the sheet comes up, but an uploaded image is fetched as its own separate asset; therefore, it tends to pop in a beat later on a refresh. There isn’t a setting to force it to load in lockstep with the rest of the sheet. Keeping the file small helps, but if that ~1 second bugs you, the cleaner fix is to skip the image for the tabs and use the table-cell route I mentioned earlier. Those buttons render with the visual data rather than as a separate fetch, so there’s no image load to wait on. The tradeoff is you lose the pill shape and end up with rectangular cells.

For your filters, you can change the color of it within editing your themes. If you go to the theme editor, navigate to the ‘main’ tab and then under there, you are going to interact with the ‘background’ color under ‘primary interface’. Refer to the screenshot below for reference:

Hope this helps and let me know if you have any further questions!

Hi @saurabh.pawar,

Just checking back in since this thread hasn’t received a response in a while. Was Jacob’s reply helpful to you and/or were you able to find a solution yourself in the meantime? Please help the community by marking this answer as “Solution” or following up in general within the next 3 business days!

Thank you!

Hi @saurabh.pawar,

Since I haven’t received any further updates from you, I’ll treat this inquiry as complete for now. If you have any additional questions, feel free to create a new post in the community and link this discussion for context.

Thank you!