I successfully created a small dash app with a navbar element. I have added pills=True to my navbar and when I click on a tab it gets highlighted and refreshs of the page keep it highlighted.
However, when I first navigate to my site I can make sure it activates the first tab but the highlighting in the title is missing. Wasn’t able to find a solution for that yet. Any hint?
In response to your comments I add more info, let me know in case its not sufficient.
# use brand to set top left item in navbar
# use pills=True and on NavLink active="exact" to show the current activated tab
navbar = dbc.Nav(
children = [
dbc.NavbarBrand(" jmHome"),
dbc.NavItem(dbc.NavLink("Unterstand", active="exact", href="/thtUnterstand"), class_name="ml-2"),
dbc.NavItem(dbc.NavLink("Keller", active="exact", href="/thtKeller")),
dbc.NavItem(dbc.NavLink("Meaco", active="exact", href="/meaco")),
dbc.NavItem(dbc.NavLink("Stromverbrauch", active="exact", href="/strom"))
], pills=True
)
This shows me a page with the brand top-left and 4 tabs, none of the tabs are marked. Selecting one of the tabs shows the tab title on black background (caused by pills=True I assume).
In the “display_page” function I try to detect an empty pathname and set this to the first tab if it is empty. This shows me the correct tab content but the tab title is not shown as selected.
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == "":
pathname = '/thtUnterstand' # default value
print(f"display page {pathname}")
if pathname == '/thtUnterstand':
return thtUnterstand.layout
elif pathname == '/thtKeller':
return thtKeller.layout
I assume I need to initialize the “pills” setting to point to the first tab?
Or it might be that my code in display_page is not the “dash” way to do things?
Sorry for not being specific enough in my initial question.
