Group all the items under the same parent name in menu bar

Dash Python
1

Hi,

There are multiple analysis report under the same parent name.

How to collapse/group them into the parent name, so when click the parent, it will expand the list of all the analysis?

For example:
Multiple report under analysis_today, so, the sidebar should group all the “_today” into the analysis_today. When user click the analysis_today, then expand all the items grouped.

sidebar:

image



image
image729×621 27.8 KB

2

Hello @beginof,

Here I tried to implement what you have in your mind by utilizing Dash Mantine Component just to give you an idea how you can arrange your app layout. You can use whichever community component (e.g Dash Bootstrap Component etc.) you like by following the code snippet as a blueprint.

from dash import Dash, html
import dash_mantine_components as dmc


app = Dash(__name__)

app.layout = html.Div(
    [
        dmc.Navbar(
            p="md",
            width={"base": 300},
            height=500,
            children=[
                dmc.Accordion(
                    children=[
                        dmc.AccordionItem(
                            children = [
                                dmc.AccordionControl("Analysis Today"),
                                dmc.AccordionPanel(
                                    children=[
                                        dmc.Anchor("PH_today", href="/"),
                                        dmc.Space(h="1rem"),
                                        dmc.Anchor("MY_today", href="/"),
                                        dmc.Space(h="1rem"),
                                        dmc.Anchor("Europe_today", href="/"),
                                    ]
                                ),
                            ],
                            value="analysis_today",
                        ),
                        dmc.AccordionItem(
                            children= [
                                dmc.AccordionControl("Budget"),
                                dmc.AccordionPanel(
                                    dmc.Anchor("MY_budget", href="/"),
                                ),
                            ],
                            value="budget",
                            ),
                    ],
                ),
            dmc.Anchor("Analysis_past", href="/", ml = '1rem', mb= '1rem', mt= '1rem'),
            dmc.Anchor("Analysis_future", href="/", ml = '1rem'),
            ],
        )
    ]
)

if __name__ == '__main__':
    app.run(debug=True)

You can use dmc.NavLink instead of dmc.Navbar to make it more resembling to the image that you shared.

Cheers!

3 Likes