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
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.
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.
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
10 thoughts on “Custom Collapsing Report Navigation Pane”
Could you share the final experience/report please
Added a link to the bottom of the post as well as the Resources page.
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?
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 “.”
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.
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! 🙂
The eventual output is great but creating a navigation pane and then copying it to each tab and creating bookmarks for each is tedious by itself but what’s worse is then making a change to the menu and having to re-copy the changes to each tab again and update all the bookmarks again. Certainly adds a fair amount of maintenance overhead.
Wish the Power BI Team comes up with something that makes creating such navigation bar experiences easier.
Fair points for sure. Visual groups have made it much easier to edit now, as you can simply slide new elements into the group and don’t have to recreate or even update bookmarks because we are hiding and unhiding the group, rather than the individual elements
I see an idea for this but it needs a lot more love (votes) https://ideas.powerbi.com/forums/265200-power-bi-ideas/suggestions/32581084-report-page-navigation