The ULTIMATE Page Navigation (Part 2) ONE TRICK ENDLESS POSSIBILITIES I Power BI DESIGN

in my last video i showed you how to set up an effective good-looking menu using the built-in page navigator that's easy to set up and to maintain however sometimes you might want to add a little bit of extra to your menu well in this video i'm going to show you a trick that opens endless possibilities when it comes to the design of your menu so that you can build for example something like this over here well let's get started [Applause] welcome to how to power bi my name is boss and if this is the very first time for you visiting this channel then make sure to hit that subscribe button if you want to stay up to date on all of my videos in which i share everything i know about power bi now let's talk a little bit more about the design of the page navigation menu as a starting point i take the menu that i've built in the previous video which basically consists of two parts the built-in page navigator and then in the back we just have a rectangular shape now the big advantage of using the built-in page navigation is that everything nicely updates when you add a new page to your report or when you change the order it automatically reflects in your page navigation for example over here i can add a page go back i see it added a button to my page navigation which already has an action assigned to it so when i click on it it brings me to the new page and also when i change the page order then it automatically reflects in my menu so how can we now take this manual to the next level well the first part of the trick is that we can overlap different shapes and elements in a power bi report to create certain effects and basically we did that already over here because here we have a page navigation and we have the background which is a rectangular shape and the shape can be anything for example here we can go to shape and we can choose something else let's go for a parallelogram parallelogram and then we can go to style and here we can turn the border off all right so now i just have to make it a little bit smaller maybe like this and then i take my page navigation and i drag that a little bit more to the right now the shape is a little bit more unusual however you can make this look very good but you just have to be a bit more creative now let's go to formatting and then here under style and then we can push the text a bit more to the right so for example 50 pixels and now i want to change the fill color for the selected state so let's go for selected and then to fill and here i don't have any transparency so i'm going to put that to zero however now i want to make it look as if those buttons that are not selected are pushed to the back now how we can achieve that is by going here back to default the color stays as it is however i'm going to put up the transparency a little now this is a little bit too much let's go for let's say 10 now you see it looks as if the unselected buttons are pushed to the back and when you hover over it it's kind of nice that the icon shows on top of that background shape and also for the buttons themselves we could go for a different shape and we could choose the same shape as we had for the background just like this and also that looks quite interesting now let me give you another example but then for a horizontal menu now here this is the horizontal menu that i've built in the last video and also here instead of a rectangular shape i'm going to choose a different shape maybe a line this time this is a little bit too thin so here on the style let's go to border and let's choose the right color and make it a little bit thicker let's go for maybe three pixels i'm going to take that line and put it more or less in the middle just like this and you see it is important that that selected button is not transparent so let's select over your menu go to style and then here for the fill color for the selected state there i put the transparency to zero and this already looks quite interesting especially if you start to experiment with the different shapes that are there so here we could also go for let's say a pill and you see that looks also pretty good now let's maybe also create a different hover effect so i'm going to take my page navigation go to style and then here i go to border and let's add a white border and let's make it 5 pixels you see it adds a little bit of space between the bell and the line now we can fill up that space when we hover over it so i go here to state hover and then here we choose the same color as the pills and when i now hover over it it fills up that empty space and then we can make the bond maybe also a little bit bigger when we hover over it so here for the overstate i'm going to put that up you see that looks pretty good now this was just the first part of the trick that you can overlap different elements to create a certain effect for your menu however now i want to focus on the buttons themselves maybe you want to add a certain element like a left border line to each button when you hover over it well you might think okay we can do the same thing you can go here to shapes and then maybe add a little line to the left hand side of the button however the problem with that is that it takes a lot of time to set up and to maintain instead of that you can do the following you take the page navigation that you just built before copy it ctrl c ctrl v to paste it and for now i'm just going to drag it to the right hand side of a menu now the first formatting change that we're going to do is here under style and then here the text i'm going to turn off so that we basically only have the buttons without the text now after we remove the text what remains is basically just the buttons without the text but these ones we're going to use as an extra element for the main button in this case let's say that we want to create border lines on the left hand side of these main buttons then we can go here to fill and for fill we choose a different color so let's say that we want to have this color and for the selected states i just have to make sure that there's no transparency so i'm going to put the transparency here to zero so now i can resize it let's make it a little bit smaller and then we put this on the left hand side of our main buttons so now you see we have created left border lines for buttons and you might think what is the big deal we could also just have used shapes however the big advantage of using this approach is that when we add a new page to it and we go back now you see it automatically added a new button but also that left border line is there now to stay organized let's go here to view selection pane and then here we want to rename the menu buttons the second pair of menu buttons to maybe menu effect and then we can also group them together and this is going to be my page navigation now let me show you more applications of this but first i'm going to remove the background color of the selected item so here the menu buttons style and then here for selected i'm going to go and change the fill color to the same color as the background and now we can take a menu effect and put it below our menu buttons and once you change the layer order we can start resizing it which i usually would do here from general then properties and then here we can set the height and the width and we just make it a little bit wider for example 100 then i go here to position and now i'm going to push it either a little bit up or a little bit down so if we push it down you see a line appears at the bottom of our buttons and if i push it here to the right you see this border line on the left hand side becomes a little bit smaller i can just keep on pushing it you see now we have this border line at the bottom of our buttons so now you can basically create a line wherever you like for your buttons my tip here is use the general tab and the formatting and here the size and the position so for example if we have a menu buttons here we have a height of 300 wait for 200 then for the manual effect i could start off with exactly the same so a height of 300 and a width of 200 and then i go to position and here i choose the same position i as i have for the menu buttons which is 50 okay and then here for the position vertically there i have 157 and i'm going to use exactly the same over here so that means now it's in the back and then you can start moving it up and down and to the left so for example if i want to have a thicker line at the top then you see i decrease the vertical number if i want to have this line a little bit smaller i just keep on increasing it and if i want to have a little bit of a line on the left hand side then i just decrease the number four horizontal and that's it so now the third part of my trick the big finale how can we now create a very cool hover effect that makes it look like as if the button shifts to the left when you go over it with your mouse now first i'm going to start with that manual effect i'm going to make it a bit smaller and let's push it first here to the left hand side of the main buttons okay so this is what we had before but what we can do now is that we position them behind the main buttons so over here i go to general properties position and i make sure that i have here 50 and then also here for the main menu buttons i have 50 so that when i hide the main menu buttons only then i see the border line on the left now let's maybe go for a little more subtle color for these borderlines so i go to style and then here to fill and let's choose a darker blue but not as dark as the background and let's then also go to the menu buttons and also here i want to have that same background color so let's go for that same fill color and let's then also change the color for the selected state to green blue like we had before and then the very crucial part what happens on the hover state so when we go to hover then i want to have a transparency of a hundred percent so that now when we hover over the buttons we only see that borderline on the left hand side and also here we have anna's possibilities when we start playing around with the different shapes and the different formatting options that are there so it could look like this for example or maybe you want to go for the build shape or maybe you want to move the text to the right and then when you hover over the buttons then the bill goes to the left just like this as you can see this one trick opens up a lot of new design options for your page navigation menus in your power bi reports now if another design trick coming up in the next video so if you want to be notified when i upload that video then make sure to hit that subscribe button and i want to thank you again for watching i see you in the next one

Channel: How to Power BI

Views: 94,877

Keywords: page navigation power bi, power bi page navigation, interactive page navigation power bi, menu power bi, power bi menu, menu in power bi, dynamic page navigation, one click menu, ultimate page navigation, best page navigation, create menu in power bi, power bi, power bi tutorials for beginners, power bi desktop, how to power bi, datatraining, howtopowerbi, bas dohmen, datatraining.io, bas

Id: PPBPX30fW3E

Length: 11min 7sec (667 seconds)

Published: Tue Dec 28 2021