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