✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Pre-select (and highlight) Tab based on URL

This is, I imagine, one of those that will be answered quickly, and it’s just my brain not working on a Friday afternoon…

I have a layout with a dcc.Tabs, with multiple tabs.
When the user selects a Tab, it gets highlighted (standard behaviour)

I also use a dcc.Location to record the currently selected tab in the URL. That way if someone reloads the browser page, the same selection is done.

That all works fine, apart from 1 thing: the tab is not highlighted when setting the tab from the URL.

                         dcc.Tab(label='Encoding Performance',
                         dcc.Tab(label='Ladder Spread Analysis',

        Output("tab_level_1_content", "children")
        Input("tab_level_1", "value")
        State('url', 'search')
def show_tab(selected_tab, current_url):
    if not selected_tab:
        url_handler = UrlHandler(current_url)
        url_tab = url_handler.get_tab()
        if url_tab:
            selected_tab = url_tab[0]
            selected_tab = 'tab_performance'

    if selected_tab == 'tab_performance':
        return [layouts.layout_tab_performance()]
    elif selected_tab == 'tab_ladder':
        return [layouts.layout_tab_ladder()]
    return [[]]

I obviously can’t add Output(‘tab_level_1’,‘value’) for the same function since it’s using the same component as an Input…

Any idea / workaround?