Custom Collapsing Report Navigation Pane

One of the best ways to create a quality and immersive user experience in Power BI is to build in interactive navigation.

I originally started building navigation into my reports when the tabs were on the bottom of the report in order to make the experience more intuitive. Now that we have left side tab navigation option in the New Look or within the newer App navigation layout, the need for this kind of thing has diminished, as it becomes repetitive.

That being said, there is still the need to create a navigation experience if you are looking for a more cohesive/immersive experience, and full control over the experience of your end users. For example, if I want to modify filtering when a user navigate pages rather than simply switching pages. We can do this via bookmarking, but not through traditional tabbing.

In this post, I will give step by step instruction on how to implement a navigation pane, and tips on how to design this experience

Getting Started

If you have read my other posts, this will be familiar. I will start this process by building a background in PowerPoint. In this example, I am building out a thin Bar on the left side with a hamburger icon on the top left. I also have a an accent of red next to the grey bar, which will come into play when we get into Power BI .

In Power BI, I will import my background (if you want to learn more about backgrounds, check out this post)

I will then add a shape that will act as my Panel in Power BI and match the color/size with the red element I included in the background

This will give the effect of the pane sliding out from the left side.

I will then build my navigation buttons on top of the red rectangle I created, giving the “current page” a different format to make it look selected

I will then enrich the filter pane by adding a label, and some shapes to make it feel more app like.

In addition, I will add a full canvas size Rectangle and has no fill and 100% Transparency for the line and ensure this shape is at the bottom of my group. This will allow me to give the users the ability to click anywhere outside of the panel to close the panel.

Now that my Pane is built, I will select all of my new elements and Right click > Group them

Next I will create my bookmarks for opening/closing the pane.

Next, I will create a button to place on top of my Hamburger icon. To create a subtle hover effect, I create a button with a default state color that matches my grey bar, and has 50% transparency, allowing the icon to show through. On Hover, the button is set to 100% transparency.

I will set the Action of the button to my “Open Pane” Bookmark and give it a tooltip that makes it easier for the end users.

Next, I will assign my Close Pane bookmark to my “x” button, AND my big transparent Rectangle. This is important for landing a good user experience by making it easy to close the panel by clicking anywhere outside of it.

Watch out!

If you have worked with layered shapes and visuals a lot, you will notice that if a user clicks an object, it comes to the front. In the case of this pane, it would be on top of the buttons, and render the pane useless

To work around this, I will create a button that as no options turned on

I will then assign the bookmark to my Red pane. This makes it so that the pane can be clicked by the end user without the object coming to the front and covering the buttons.

Finish it off by adding additional buttons to the side bar

In order to land that app-like user experience, add additional buttons for things like Guide or Information Overlays or direction to additional resources. Gives these buttons the same hover action as your Hamburger Icon to make for a consistent experience

Before Publishing, hide all of your page tabs except for the initial landing page. This is important because we do not want users to have two options on how to navigate.

Conclusion

When standard page navigation is not good enough to meet your need, building a pop out Navigation is a great alternative. Landing it correctly for a good user experience can get complicated quickly if the right attention to detail is not applied.

Try it out and see what other user experiences you can create with these methods!

Download the starting point in the Background Gallery and the PBIX in the new Resources page

6 thoughts on “Custom Collapsing Report Navigation Pane

  1. This is very interesting but hard to grasp (at least for me). I guess an example file would be much appreciated.

    How do you handle multiple pages? Do you recreate the “open pane” and “close pane” bookmarks for each page (Executive Summary, Revenue Detail, etc.)?

    “To work around this, I will create a button that has no options turned on. I will then assign the bookmark to my Red pane.”
    Due to the link the user will always see “Click here to follow link”. Is there a way to avoid this?

    Like

    1. Added the PBIX download link to the bottom of the post, as well as the Resources page! For multiple pages, i would copy/paste the group of visuals. Each page needs it’s own bookmarks. For the “Click to Follow link” message, we can adjust what pops up to something minimal so it isn’t as noticeable like “.”

      Like

      1. Chris, thanks for the file.

        The “annoying” link can be avoided by arranging the buttons and transparent useless buttons in a way that they totally cover the red rectangle.

        Unfortunately, building such nice navigation panels is rather tedious.

        Like

      2. Ahh yes, I have done this before as well but it is incredibly painful! Yes it is tedious, and the “new look” at least gets us an out of the box left nav, but if wanting to go that extra mile it’s sometimes worth the work. To be fair, it’s a lot easier now than it used to be too! 🙂

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s