Open a link in a new tab

Hi there !

I need your help !

I am working on a multi page app and I would like to open a link from page 1 in a new tab : layout_page_ext would be opened in a new tab.

import dash
from dash import Dash, dash_table
from dash.exceptions import PreventUpdate
import plotly.graph_objects as go
import pandas as pd
import plotly.express as px
import numpy as np
import dash_bootstrap_components as dbc
from dash import Dash, dcc, html, Input, Output, State, MATCH, ALL

app = Dash(__name__)

# SIDEBAR
SIDEBAR_STYLE = {
    "position": "fixed",
    "top": 0,
    "left": 0,
    "bottom": 0,
    "width": "16rem",
    "padding": "2rem 1rem",
    "color": "#FFE000",
    "background-color": "#000000",
}
CONTENT_STYLE = {
    "margin-left": "18rem",
    "margin-right": "2rem",
    "padding": "2rem 1rem",
}
sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "Navigation entre les pages", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Home", href="home", active="exact", style={"color": "#FCFCF7"}),
                html.Br(),
                dbc.NavLink("Page1", href="page1", active="exact", style={"color": "#FCFCF7"}),
                html.Br(),
                dbc.NavLink("Page2", href="page2", active="exact", style={"color": "#FCFCF7"}),
            ],
            vertical=True,
            pills=True,
        ),
    ],
    style=SIDEBAR_STYLE,
)

# URL SIDEBAR
url_bar_and_content_div = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='root-url', style={'display': 'none'}),
    html.Div(id='first-loading', style={'display': 'none'}),
    html.Div(id='page-content')
])

layout_page1 = html.Div([
    html.Br(),
    dbc.Row(
        dbc.Col(html.H1("Table 1", style={"color": "#FFE000"}),
                width={'size': 6, 'offset': 5}
                ),
    ),
    html.Br(),
dbc.Row(dbc.Col(
        dbc.NavItem(dbc.NavLink("Link Text",
        href="page-ext",
        target="_blank",
        external_link=True
    )
)
)
)
    ])

layout_page2 = html.Div([
    dbc.Row(
        dbc.Col(html.H1("Table 2", style={"color": "#FFE000"}),
                width={'size': 6, 'offset': 5}
                ),
    ),
])

layout_page_ext = html.Div([
    dbc.Row(
        dbc.Col(html.H1("Lien externe", style={"color": "#FFE000"}),
                width={'size': 6, 'offset': 5}
                ),
    ),
])

app.layout = html.Div([url_bar_and_content_div, sidebar])

app.validation_layout = html.Div([
    url_bar_and_content_div,
    sidebar,
    layout_page1,
    layout_page2,
    layout_page_ext
])

# SIDEBAR CALLBACKS
# The following callback is used to dynamically instantiate the root-url
@app.callback([dash.dependencies.Output('root-url', 'children'),
               dash.dependencies.Output('first-loading', 'children')],
              dash.dependencies.Input('url', 'pathname'),
              dash.dependencies.State('first-loading', 'children')
              )
def update_root_url(pathname, first_loading):
    if first_loading is None:
        return (pathname, True)
    else:
        raise PreventUpdate

# This is the callback doing the routing
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [
                  dash.dependencies.Input('root-url', 'children'),
                  dash.dependencies.Input('url', 'pathname'),
              ])
def render_page_content(root_url, pathname):
    if root_url + "home" == pathname:
        return html.P(layout_page_ext)
    elif root_url + "page1" == pathname:
        return html.P(layout_page1)
    elif root_url + "page2" == pathname:
        return html.P(layout_page2)
    elif root_url + "page-ext" == pathname:
        return html.P(layout_page_ext)
    else:
        return html.P(layout_page1)

if __name__ == '__main__':
    app.run_server(debug=True)




I have set the link in page 1 :

dbc.Row(dbc.Col(
        dbc.NavItem(dbc.NavLink("Link Text",
        href="page-ext",
        target="_blank",
        external_link=True
    )
)
)
)

But that link opens a new page which only contains the sidebar (the initial app.layout) and not the loayput_page_ext. I think that the first loading prevent the opening of the layout_page_ext as it opens in a new tab (so the first loading would be None).

Could you help me ??

Thank you very much in advance !!

1 Like

Ive ran into the same problem!

Hello @cdolfi,

How does this not work?

Could you please provide some more information on this?

So I am trying to make a navLink inside of a navItem when clicked open the link in a new tab and I can not figure out from the documentation how to make that happen. this is the code:

dbc.NavItem(
            dbc.NavLink(
                "Visualization request",
                href="https://github.com/sandiego-rh/explorer/issues/newassignees=&labels=enhancement%2Cvisualization&template=visualizations.md",
                external_link= 'True',
            )
        ),

You will need to pass a target in the component as well.

image

@jinnyzor Would target be used in place of the href or with the href? If it is with, what input is target expecting, the same link as href?

Taking your example, it would look like this:

dbc.NavItem(
            dbc.NavLink(
                "Visualization request",
                href="https://github.com/sandiego-rh/explorer/issues/newassignees=&labels=enhancement%2Cvisualization&template=visualizations.md",
                external_link= 'True',
                target='_blank'
            )
        ),
1 Like

@jinnyzor Thank you that worked! Quick question, what does passing ‘_blank’ do exactly/mean in this context?

When you pass ‘_blank’ it tells the browser to open a new window/tab based upon the user’s default settings.

1 Like