dbc.Nav select a default dbc.NavLink

Dash Python
1

I have implemented a Sidebar in my application using dbc.Nav. I am using dbc.NavLink and render the layout component of the page to update content.

I have a couple of questions -

  1. dbc.NavLink takes href as an argument which is a string. Is there a way to pass a list of strings? I’d like to update / render same layout for Home and NavLink1?

  2. How do I select a dbc.NavLink option by default?

My code below for illustration:

import dash
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc


app.layout = html.Div([

html.Div(

                                [
                                    html.H4("Sidebar", style={"textAlign":"center"}),
                                    html.Hr(),
                                    dbc.Nav(
                                        [
                                            dbc.NavLink("opt1", href="/page-1", active="partial"),
                                            dbc.NavLink("opt2", href="/page-2", active="partial"),
                                            dbc.NavLink("opt3", href="/page-3", disabled=True),

                                        ],
                                        vertical=True,
                                        fill=True,
                                        pills=True,
                                    ),
                                ],
                 )

                dcc.Location(id='url'),

                html.Div(id='page-content'),

]) 


# Callbacks
# Render page content
@application.callback(Output("page-content", "children"),
              [
                Input('url', 'pathname')
              ]
             )
def display_content(pathname):

    if pathname == "/":
        return sub.layout

    elif pathname == "/home":
        return sub.layout

    elif pathname == "/opt1":
        return sub.layout

    else:
        return dash.no_update

I read through the docs but didn’t find info on what I am looking for. Nav - dbc docs

2

Hi,

If you want to have the same layout to two distinct pathnames, just add them in the same conditional when updating the layout. The NavLink is essentially a link, it doesn’t make sense to have two paths…

As for the second question, it depends a bit on what you mean “select by default”. Do you mean that you want the app to open with a specific pathname and layout, other than the index/home (“/“)?

3

Yep, selected by default as in load a specific pathname and layout by default. I am using a bootstrap css template and the css is for active selection is different.