How to return list of dbc.NavLink within dbc.Nav through looping via a dictionary

Hello,
I would like to generate the list of dbc.NavLink under dbc.Nav through looping over a dictionary.
How could I generate the following:

dbc.Nav(
                  [
                      dbc.NavLink("GitHub", href=f"https://github.com", active="exact"),
                      dbc.NavLink("Plotly", href=f"https://dash.plotly.com/", active="exact"),
                      dbc.NavLink("Pandas", href=f"https://pandas.pydata.org/", active="exact"),
                  ],

via looping through the following dictionary:

navlinks_dict = {'names'         : ['GitHub', 'Plotly', 'Pandas'],
                             'urls'          : ['https://github.com', 'https://dash.plotly.com/', 'https://pandas.pydata.org/'],
                             'active_status' : ['exact', 'exact', 'exact']}

I have tried the following, which does not work as I don’t know how to refer to each field within dbc.NavLink:

navlink_list = []
for i in range(len(navlinks_dict['names'])):
    navlink_list.append(dbc.NavLink(navlinks_dict['names'][i], href = navlinks_dict['urls'][i], active = navlinks_dict['active_status'][i]))

Apologies for the code formatting, I can’t seem to fix it on my post.

Thank you very much.

You could use zip:

dbc_list = []
for n, u, a in zip(navlinks_dict['names'], navlinks_dict['urls'], navlinks_dict['active_status']):
    dbc_list.append(dbc.NavLink(n, href=u, active=a))

I just notcied, that this is actually the same you did, just different.

What do you mean by this?

I had some time:

import dash
from dash import html
import dash_bootstrap_components as dbc

navlinks_dict = {
    'names': ['GitHub', 'Plotly', 'Pandas'],
    'urls': ['https://github.com', 'https://dash.plotly.com/', 'https://pandas.pydata.org/'],
    'active_status': ['exact', 'exact', 'exact']
}

navlink_list = []
for i in range(len(navlinks_dict['names'])):
    navlink_list.append(
        dbc.NavLink(
            navlinks_dict['names'][i],
            href=navlinks_dict['urls'][i],
            active=navlinks_dict['active_status'][i]
        )
    )


app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])
app.layout = html.Div(
    [
        dbc.NavbarSimple(
            [
                dbc.NavItem(dbc.NavLink(n, href=u, active=a))
                for n, u, a in zip(navlinks_dict['names'], navlinks_dict['urls'], navlinks_dict['active_status'])
            ],
            brand="NavbarSimple",
            brand_href="#",
            color="primary",
            dark=True,
        ),
        html.Div(
            dbc.Nav(
                navlink_list,
                pills=True,
                fill=True
            ),
            className='bg-danger'
        )
    ]
)

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

Thank you very much for this.

I just realised that the output from your list comprehension:

navlink_list = [
dbc.NavLink(n, href=u, active=a)
for n, u, a in zip(navlinks_dict['names'], navlinks_dict['urls'], navlinks_dict['active_status'])
 ]

is the same as for my own loop:

navlink_list = []
for i in range(len(navlinks_dict['names'])):
    navlink_list.append(dbc.NavLink(navlinks_dict['names'][i], href = navlinks_dict['urls'][i], active = navlinks_dict['active_status'][i]))

output:

print(navlink_list)
[NavLink(children='GitHub', active='exact', href='https://github.com'),
 NavLink(children='Plotly', active='exact', href='https://dash.plotly.com/'),
 NavLink(children='Pandas', active='exact', href='https://pandas.pydata.org/')]

I thought that list wouldn’t work when passed in the layout because it looks different from the hardcoded NavLink list I was trying to reproduce below:

navlink_list = [
dbc.NavLink("GitHub", href=f"https://github.com", active="exact"),
dbc.NavLink("Plotly", href=f"https://dash.plotly.com/", active="exact"),
dbc.NavLink("Pandas", href=f"https://pandas.pydata.org/", active="exact"),
                  

I didn’t understand where the children = came from and thought the format wasn’t the correct one to pass on the layout.

But it turns out it actually works. It’s a bit strange because I would expect a list to come after children = , not a string, so it looked wrong to me.

Anyway, thanks so much for your help and your list comprehension looks much better than my loop.