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

**URL:** <https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318>\
**Category:** Dash Python\
**Tags:** tips-and-tricks\
**Created:** [August 24, 2022, 7:06pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318 "2022-08-24T19:06:49Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![cosco](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@cosco](https://community.plotly.com/u/cosco)\
**Post date:** [March 21, 2023, 8:14am UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/22 "2023-03-21T08:14:36Z")

</div>

> [@tphil10](#):
>
> ```auto
> 'https://use.fontawesome.com
> 
> ```

> [@tphil10](#):
>
> ```auto
> 'https://use.fontawesome.com
> 
> ```

> [@AnnMarieW](#):
>
> ```auto
> /* 
> 
> ```

This doesnt work for me.  
Best regards, Clemens

---

<div class="post-metadata">

**Author:** ![tphil10](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tphil10/32/19868_2.png) [@tphil10](https://community.plotly.com/u/tphil10)\
**Post date:** [March 21, 2023, 9:38am UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/23 "2023-03-21T09:38:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![abhinva](https://avatars.discourse-cdn.com/v4/letter/a/3bc359/32.png) [@abhinva](https://community.plotly.com/u/abhinva)\
**Post date:** [March 21, 2023, 1:08pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/24 "2023-03-21T13:08:11Z")

</div>

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](https://dashboardit.onrender.com/ResponsiveNavbar). (Will take some time to spin up). Can find the code [here](https://github.com/Abhinavk910/dashboard_mutiapp/blob/main/pages/responsive_navbar.py). And for a brief step-by-step explanation find [here](https://medium.com/@abhinavk910/building-dashboard-using-dash-responsive-navbar-part-1-455c68eb04ae)

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.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 21, 2023, 2:02pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/25 "2023-03-21T14:02:46Z")

</div>

Hey @abhinva Thanks for sharing!

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

> **[DMC/DBC Home](https://dmc-dbc-building-blocks.onrender.com/)**
>
> Building blocks for DMC/DBC

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/b/eb67a65bd8eaedb828a1a9deb4e446ce15881af2.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/6/b6f6f9324f457046f87510d506cc12ad198d81a8.png)

---

<div class="post-metadata">

**Author:** ![cosco](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@cosco](https://community.plotly.com/u/cosco)\
**Post date:** [March 26, 2023, 12:22pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/26 "2023-03-26T12:22:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![tphil10](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/tphil10/32/19868_2.png) [@tphil10](https://community.plotly.com/u/tphil10)\
**Post date:** [March 28, 2023, 12:17am UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/27 "2023-03-28T00:17:19Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![cosco](https://avatars.discourse-cdn.com/v4/letter/c/a3d4f5/32.png) [@cosco](https://community.plotly.com/u/cosco)\
**Post date:** [April 13, 2023, 7:32pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/28 "2023-04-13T19:32:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mmm2310](https://avatars.discourse-cdn.com/v4/letter/m/cab0a1/32.png) [@mmm2310](https://community.plotly.com/u/mmm2310)\
**Post date:** [April 14, 2023, 3:31am UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/29 "2023-04-14T03:31:30Z")

</div>

Thanks for sharing…Very useful.  
Cheers.  
Mukesh Makwana

---

<div class="post-metadata">

**Author:** ![SpanishHans](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/spanishhans/32/30115_2.png) [@SpanishHans](https://community.plotly.com/u/SpanishHans)\
**Post date:** [December 19, 2024, 5:11pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/30 "2024-12-19T17:11:22Z")

</div>

Hey everyone. Was looking at this forum and was interested in implementing what @abhinva showcased, however mantine 0.15 doesn’t have the navbar component anymore, and everything is now handled by AppShell. Any pointers on how to implement this on the new paradigm?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [December 19, 2024, 5:15pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/31 "2024-12-19T17:15:49Z")

</div>

Hi @SpanishHans and welcome to the Dash community 🙂

Have you tried `dmc.AppShellNavbar`?

Check out this section of the docs. It was recently updated and includes 8 examples of responsive sidebars

> **[Dash Mantine Components | AppShell](https://www.dash-mantine-components.com/components/appshell)**
>
> Responsive shell for your application with header, navbar, aside and footer.

---

<div class="post-metadata">

**Author:** ![SpanishHans](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/spanishhans/32/30115_2.png) [@SpanishHans](https://community.plotly.com/u/SpanishHans)\
**Post date:** [December 19, 2024, 6:58pm UTC](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318/32 "2024-12-19T18:58:23Z")

</div>

Hey there, thanks for you quick reply!

Yeah, after some thinkering around i got this:

```auto
app = Dash(external_stylesheets = dmc.styles.ALL)
server = app.server

theme_toggle = dmc.Switch(
    offLabel=DashIconify(
        icon="radix-icons:sun", width=15, color=dmc.DEFAULT_THEME["colors"]["yellow"][8]
    ),
    onLabel=DashIconify(
        icon="radix-icons:moon",
        width=15,
        color=dmc.DEFAULT_THEME["colors"]["yellow"][6],
    ),
    id="color-scheme-toggle",
    persistence=True,
    color="grey",
)

app.layout = dmc.MantineProvider(
    [
        dmc.AppShell(
            [
                dmc.AppShellHeader(
                    dmc.Group(
                        [
                            dmc.Image(src=LOGO_IIP),
                            dmc.Title("App Name"),
                        ],
                        h="100%",
                        px="md",
                    )
                ),
                dmc.AppShellNavbar(
                    id="navbar",
                    children=[
                        dmc.Stack(
                            [
                                dmc.NavLink(
                                    label="Home",
                                    leftSection=get_icon(icon="fa-solid:building"),
                                    active=True,
                                    variant="filled",
                                    href="/",
                                ),
                                dmc.NavLink(
                                    label="Page 2",
                                    leftSection=get_icon(icon="fa6-solid:chart-simple"),
                                    variant="filled",
                                    href="/dashboards",
                                ),
                                dmc.NavLink(
                                    label="Page 3",
                                    leftSection=get_icon(icon="fa6-solid:magnifying-glass"),
                                    variant="filled",
                                    href="/explorador",
                                ),
                                dmc.NavLink(
                                    label="Page 4",
                                    leftSection=get_icon(icon="fa-solid:wrench"),
                                    variant="filled",
                                    href="/herramientas",
                                ),
                                theme_toggle
                            ],
                        justify="space-between"
                        )
                    ],
                    p="md",
                ),
                dmc.AppShellMain([
                    "Main",
                    dmc.Affix(
                        children=[
                            dmc.Burger(
                                id="mobile-burger",
                                size="sm",
                                hiddenFrom="sm",
                                opened=False,
                            ),
                            dmc.Burger(
                                id="desktop-burger",
                                size="sm",
                                visibleFrom="sm",
                                opened=True,
                            ),
                        ],
                        position={"bottom": 20, "left": 20}
                    )
                ]),
            ],
            #layout="alt",
            header={"height": 80},
            padding="md",
            navbar={
                "width": 70,
                "breakpoint": "sm",
                "collapsed": {"mobile": True},
            },
            id="appshell",
        )
    ],
    id="mantine-provider",
    forceColorScheme="light",
)

@callback(
    Output("appshell", "navbar"),
    Input("mobile-burger", "opened"),
    Input("desktop-burger", "opened"),
    State("appshell", "navbar"),
)
def toggle_navbar(mobile_opened, desktop_opened, navbar):
    navbar["collapsed"] = {
        "mobile": not mobile_opened,
        "desktop": not desktop_opened,
    }
    return navbar

clientside_callback(
    """ 
    (switchOn) => {
       document.documentElement.setAttribute('data-mantine-color-scheme', switchOn ? 'dark' : 'light');  
       return window.dash_clientside.no_update
    }
    """,
    Output("color-scheme-toggle", "id"),
    Input("color-scheme-toggle", "checked"),
)

if __name__ == " __main__":
    app.run_server(debug=True, host='0.0.0.0', port=1234)

```

Using only:

```auto
#navbar {
    transition: width 0.2s ease-in-out;
}

#navbar:hover {
    width: 300px !important;
}

@media (max-width: 768px) {
    #navbar:hover {
        width: 100% !important;
    }
}

```

Any pointers on a better implementation are welcome,

Hope this is useful for anyone.

[Previous page](https://community.plotly.com/t/sidebar-with-icons-expands-on-hover-and-other-cool-sidebars/67318.md?page=1)