Is there a way to combine tab component and dcc.location?

Dash Python
1

Hi, I want to ask is there a way to combine tab component and dcc.location. I want when the user clicks on a tab it changes the page content and also updates the URL. Can anyone teach me how to do it?

2

Is there a particular reason you want it this way? Because in my opinion it is easier to make a multipage app with links. By pressing a link you will actually be redirected to a new page and thereby the content and url changes.

Check out this Guide.

Greetings,

Sempah

3

For now, we recommend “styling” your dcc.Link components to “look like” tabs.

4

Hello there,

Does the below discussion help you, @Yuechean ?

5

For anyone coming across this from Google: Inside the dcc.Link element use this style to get the link to have a full DIV clickable area as opposed to the text only which is the default. style={‘display’: ‘block’, ‘height’: ‘100%’, ‘width’: ‘100%’}

6

Gravedigging here, but today I think this is possible by using triggered by and a callback taking both a dcc.Location.search (or path) and the dcc.Tabs.value as inputs and ouptuts. Use the triggered_id to determine which value should be used next.

(Input output callback by chadaeschliman · Pull Request #1525 · plotly/dash · GitHub is the change which enables the above.)

But might very well be a better idea to use a solution which don’t require syncing up to states.