TODAY learn how to bring Drag & Drop to Dash with Dashboard Engine. 🌠 Sign up for the live event!

Using dcc.Location and dcc.tabs to update page/tab content

I built an app with multiple tabs and subtabs structure. I am now having to add pages to the App structure. The app file structure looks like this:


index.py
app.py
-- Tabs
---- Tab1.py
---- Tab2.py
-- Pages
---- home.py
---- archive.py
requirements.txt

In my index.py, I have two separate callbacks for updating tab and page content. I run into issues when I update page content and then attempt to update tab content. i.e unable to clear page content or overwrite page content with tab content.

Here’s my code with callbacks:

app.layout = html.Div([

    # header
    html.Div([

        html.H2("Product", style={"float":"center",
                                               "margin-left":"40%",
                                               "margin-top":"30px"}),

        html.Div(
            html.Img(src='logo-white.png', height="100%")
       ),


        dcc.Link(
            href=app.get_relative_path('/home'),
            children='Home',
            style={'paddingRight': 10}
        ),

        dcc.Link(
            href=app.get_relative_path('/archive'),
            children='Archive',
            style={'paddingRight': 5}
        ),

        ],
        className="row header"
    ),

    # tabs
    html.Div([

        dcc.Tabs(

            id="tabs",
            vertical=True,
            className="mb-3",
            persistence=True,

            children=[


                 dcc.Tab(label="Tab1", value="Tab1",
                         children=[dcc.Tabs(id="subtabs", persistence=True, style={"margin-left":"30px"},
                            children=[dcc.Tab(label='SubTab1', value='subtab1'),
                                           dcc.Tab(label='SubTab2', value='subtab'2)
                                      
                            ],

                    )
                 ]),
                 dcc.Tab(label="Tab2", value="Tab2"),

            ],
            value="Tab1",
        )

        ],

        className="row tabs_div"

    ),


    dcc.Location(id="url"),
    html.Div(id="page-content"),

    # Tab content
    html.Div(id="tab_content", style={"margin": "0% 8.9%", "float":"left"}),

])



# App Callbacks

# # Render tabs/subtabs
@app.callback(Output("tab_content", "children"),
              [

                  Input("tabs", "value"),
                  Input("subtabs", "value"),
                  Input('url', 'pathname')

              ],
             )
def render_content(tab, subtab, pathname):
    """
    For user selections, return the relevant tab
    """

    page = app.strip_relative_path(pathname)
    print(page)

    if tab == "tab1":
        return tab1.layout

    if tab == "tab2" or page == 'home':

        if subtab == "subtab1":
            return subtab1.layout

        if subtab == "subtab2":
            return subtab2.layout

    else:
        return (dash.no_update)


# Render Page content - Home and Archive
@app.callback([

                        Output('page-content', 'children'),
             
                     ],
                     [

                       Input('url', 'pathname'),

                    ]
                   )
def display_page(pathname):

      if page_name == 'archive':
        return [archive.layout(), dash.no_update]


Current behavior: When clicking on archive page, I am unable to clear / update tab content.

Desired behavior: Render Tab/subtab content when clicking on home page link.

Default page:

Page: archive link

Page: home link