Tabbed navigation (multipages) - Open in a new tab

Dash Python
1

Hi ,
I have got navigation to work (dash > 3) with dcc.Tabs, dcc.Location and multi-pages . I would like to let the user right click on a tab header and open the page in a new browser Tab. See picture below.

Is this possible ?

image
image765×279 9.97 KB

My code is very similar to this post.

2

Hello @sau001,

I believe that this is possible, you’d have to allow a path querystring to dictate the table value, and then make the component inside the tab control to have a menu based upon context menu. :slight_smile:

3

Hello @jinnyzor ,

Thanks for taking time to reply to this post.

To add more clarity , in the example above each of the Tabs are navigable via the URLs. (e.g. /home , /analytics, /archive , etc.)

For more clarity, this is the behaviour from Github I am trying to replicate

image
image1002×198 16.6 KB

4

When accessing the page, do you just want the layout or do you want the tabs to present again as well?

Try this:

import dash
from dash import *
import dash_mantine_components as dmc

app = Dash(use_pages=True, pages_folder='', external_stylesheets=dmc.styles.ALL)
app.layout = dmc.MantineProvider(html.Div([
    page_container
]))

def layout_func(**kwargs):
    return dmc.Tabs([
        dmc.TabsList([
            dmc.TabsTab(dmc.Anchor('home', href='/home', style={'textDecoration': 'none', 'color': 'unset'}), value='home'),
            dmc.TabsTab(dmc.Anchor('test1', href='/test1', style={'textDecoration': 'none', 'color': 'unset'}), value='test1'),
            dmc.TabsTab(dmc.Anchor('test2', href='/test2', style={'textDecoration': 'none', 'color': 'unset'}), value='test2'),
        ]),
        dmc.TabsPanel(['home'], value='home'),
        dmc.TabsPanel(['test1'], value='test1'),
        dmc.TabsPanel(['test2'], value='test2')
    ], id='page_layout_tab', value=kwargs.get('page') or 'home', orientation='horizontal')

clientside_callback(
    """(v) => `/${v}`""",
    Output('_pages_location', 'pathname'),
    Input('page_layout_tab', 'value'),
    prevent_initial_call=True
)

dash.register_page('', path_template='/<page>', layout=layout_func)

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

Hello @jinnyzor ,
To answer your question. If you see the Github tabbed experience (in my previous post), I want the new Browser page to retain the same inner tabs - just that the active inner tab on the new Browser page is the one that I had clicked on in the previous Browser Tab.

Thanks for posting the sample code. I can see that you are using another open source package (Dash Mantine). While this is impressive - it will be difficult for me to use this in my corporate environment.

Regards,
Sau

6

Why?

Anyways, you cant have components in tab labels with dcc.Tabs, that’s why I opted for dmc.

To do it with just dcc.Tabs, you’ll have to add an event listener to the tab label and create the context menu to perform like a link.