Forum Discussion
Curved Navigation Button
How can i make a curved navigation in dashboard as shown in the picture (Dashboard 1)?
You can reach what you want, either easier with 1 shape and 1 button per page:
Im gonna try to give precise instructions, as I cant sent files or videos.
Set the shape at the back, it can be a rectangle.
Then add 3 buttons, 2 of them you have to set with action -> page navigation, the other (page 1 in this case) leave it with action off.
For button 1 set style->default->fill with the same colour as the dashboard background, icon and text in black.For button 2 & 3 set style->default->fill with the same colour as the shape, white icon and text. You can also set another color on "on hover" which will add a lot.
Or using many shapes, background, etc. for the detailed;
Here I used the same buttons as before, but added these 3 shapes
You need to have the 2 equal shapes mirrored (rotation 90° for second shape), then add ON TOP the other rectangle on top of those (this last rectangle is to avoid some lines that you might or might not have with the other shapes).
Set the 2 rectangles with rounded corner with fill equal to the other shapes, then go to general->background, and set the backgroun to white (or the same as the dashboard background).
You will have to set the white button for each page, and if you do the second option, also move the extra shapes.Otherwise, do this shapes in another app and add it to PBI as an image (png for blank background)
Again, I'd love to send you the file, but can't; hope that helps.
6 Replies
You can take ideas from
If its a page nav, create it first for one page, with shapes behind and indiviudal buttons with just the text on top of the shapes. Select all, copy and pase for each page, moving the white part to the current page.
This is limmited in the sense that shapes dont have an "on hover" setting, but you could change the "fill" option in the button to have a similar white shape when user hovers over it.
So default fill have nothing or the same blue as the panel behind, then on hover fill be white.
Sadly, when talking about buttons, we are very limited in some ways if comparing to raw css, which would be an outstanding feature. But with clever use of shapes and in many cases bookmarks, you can actually achieve some incredible results.it is not visually appearing as you told
You can reach what you want, either easier with 1 shape and 1 button per page:
Im gonna try to give precise instructions, as I cant sent files or videos.
Set the shape at the back, it can be a rectangle.
Then add 3 buttons, 2 of them you have to set with action -> page navigation, the other (page 1 in this case) leave it with action off.
For button 1 set style->default->fill with the same colour as the dashboard background, icon and text in black.For button 2 & 3 set style->default->fill with the same colour as the shape, white icon and text. You can also set another color on "on hover" which will add a lot.
Or using many shapes, background, etc. for the detailed;
Here I used the same buttons as before, but added these 3 shapes
You need to have the 2 equal shapes mirrored (rotation 90° for second shape), then add ON TOP the other rectangle on top of those (this last rectangle is to avoid some lines that you might or might not have with the other shapes).
Set the 2 rectangles with rounded corner with fill equal to the other shapes, then go to general->background, and set the backgroun to white (or the same as the dashboard background).
You will have to set the white button for each page, and if you do the second option, also move the extra shapes.Otherwise, do this shapes in another app and add it to PBI as an image (png for blank background)
Again, I'd love to send you the file, but can't; hope that helps.
Hi mmvohra ,
Based on the description, Power BI doesn’t support creating a curved button directly, you can try to achieve by using images and custom shapes.
Besides, you can raise a new idea and add the comments there to make the feature coming sooner.
Best Regards,
Wisdom Wu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
