Bootstrap Nav component - link from a different page

Dash Python
1

I am using dbc.NavLink to switch between different Pages and Tab structures. My App folder structure looks like this:

> data
> pages
  - page1.py
  - page2.py
> tabs
  - tab1.py
  - tab2.py
index.py

All the navigation control code lives within index.py.

from dash import dcc
import dash_bootstrap_components as dbc
from app import app

app.layout = html.Div([
                          
                                dbc.Nav(
                                    [
                                        dbc.NavLink("T1", href="/tab1"),
                                        dbc.NavLink("T2", href="/tab2"),

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

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

                                dcc.Location(id='url'),
                     ])
                            
 @app.callback(Output("page-view", "children"),
          [
            Input('url', 'pathname')
          ]
         )
 def view_content(pathname):

     if pathname in ["/","/tab1/"]:
        return tab1.layout

     elif pathname == "/tab2":
        return tab2.layout

     else:
        return dash.no_update

Iā€™d like to be able to navigate from within the tabs. How do I navigate from tab1.py to tab2.py?

tab1.py

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


layout = html.Div([

                                dcc.Graph(id="g1"),

                               dbc.Button("push", color="primary", size="lg", id="btn1")

 ])

Switch to tab1 on button click.

2

Hi @keval

Try adding the href prop in the dbc.Button. For example

dbc.Button("to to tab 2 ", color="primary", size="lg", id="btn1", href="/tab2")
2 Likes