Nested Nav Links

[Manar]

Hi all,

I’ve been working on a webpage using dash,
and i’m interested to create something like Nav link with nested links appear when clicking the main nav,
something like this

Thank you

[AIMPED]

HI @Manar welcome to the forums.

This topic may help eventually:

File Explorer Tree Generator for local files

Hey all, I needed a reactive file explorer that generated a file tree given a path, so here it is. Big thanks to @AnnMarieW for help building this out! [Screen Recording 2022-10-08 at 5.09.47 PM] Here is the code: import os from dash_iconify import DashIconify import dash_mantine_components as dmc class FileTree: def __init__(self, filepath: os.PathLike): """ Usage: component = FileTree('Path/to/my/File').render() """ self.filepath = filepath def re…

The ag-grid docs use the same thing, you can find the code on github (if I’m not mistaken).

Dash AG Grid | Dash for Python Documentation | Plotly

[hoatran]

I think you could use dbc.Accordition or dmc.Accordition for this. Please refer below code:

import dash_bootstrap_components as dbc
from dash import html

accordion = html.Div(
    dbc.Accordion([
        dbc.AccordionItem([
            dbc.Row([
                dcc.Link("Installation", href='/page-1',style={'text-decoration': 'none'})
            ]),
            dbc.Row([
                dcc.Link("A minimal Dash App", href='/page-2',style={'text-decoration': 'none'}),
            ]),
            dbc.Row([
                dcc.Link("Dash in 20 minutes", href='/page-3',style={'text-decoration': 'none'})
            ])
        ],
            title="Quickstart",
        )
    ])
)

app = Dash(__name__,external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            accordion
        ],width={'size':2})
    ])
], className='p-2 align-items-center')

if __name__ == '__main__':
    app.run_server(debug=False)

With dmc.Accordition you can do as below:

import dash_mantine_components as dmc

accordion = dmc.Accordion(
    children=[
        dmc.AccordionItem(
            [dmc.AccordionControl("Quick Start"),
             dmc.AccordionPanel([
                 dcc.Link("Installation", href='/page-1',style={'text-decoration': 'none'})
             ]),
             dmc.AccordionPanel(
                 dcc.Link("A minimal Dash App", href='/page-2',style={'text-decoration': 'none'})
             ),
             dmc.AccordionPanel(
                 dcc.Link("Dash in 20 minutes", href='/page-3',style={'text-decoration': 'none'})
             ),
            ],value="quick_start"),
    ])

app = Dash(__name__,external_stylesheets=[dbc.themes.LUX])

app.layout = html.Div([
    dmc.Grid([
        dmc.Col([
            accordion
        ],span=2)
    ])
])

if __name__ == '__main__':
    app.run_server(debug=False)

[snehilvj]

Hey check out the nested navlink section here: Dash.

[Manar]

Thank you so much