Sidebar with icons - expands on hover (and other cool sidebars)

Dash Python
22

This doesnt work for me.
Best regards, Clemens

23

@cosco What about it doesn’t work? Can you provide a code snippet of what your attempting to do?

24

Hi everyone,
I just wanted to add my approach to this navbar. It uses mainly Mantine and a little bit of CSS. You can find a working example here. (Will take some time to spin up). Can find the code here. And for a brief step-by-step explanation find here

The approach is simple, added two buttons, one for the Navbar other for the Drawer. Both are components in Mantine. And using Media queries to adjust both buttons’ views. As far as CSS is concerned only to provide a hover effect to the navbar.

3 Likes
25

Hey @abhinva Thanks for sharing!

@tphil10 - this looks like it would make a great addition to dmc building blocks!

image
image726×448 5.03 KB

image
image984×575 17 KB

1 Like
26

Hello tphil10,
I tried adding a Side-Navbar with icons and when I hover on one of the Icons the navbar opens on the side showing various options to chose from.

Best Regards,
Clemens

27

@cosco Depending on which of the navbar examples you are looking at, at least one of them is designed to do that. Are you expecting something else to happen?

28

Hello tphil10 . Now some weeks later I finally figured mechanics out in this framework. It works fine now. Thank you for the help. Best Regards, Clemens

29

Thanks for sharing…Very useful.
Cheers.
Mukesh Makwana

1 Like