Change the title in tab

Dash Python
1

I have a multipage app where each page currently has Dash as the title. How can I change it to say something else?

2

You can set app.title, however this doesn’t work on a per-page basis.

Perhaps we should make a dcc.Title component that controls the page title…

9 Likes
3

I have a multi-page app structured like the guide. Piggybacking off @jacohn16’s example, here’s how I change the title for each page

from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

from flask import Flask
import dash
from apps import app1, app2

server = Flask(__name__)
app = dash.Dash(__name__, server=server, url_base_pathname='/dash')
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/dash/app1':
         return app1.layout
    elif pathname == '/dash/app2':
         return app2.layout
    else:
        return '404'

@server.route("/dash")
def MyDashApp():
    app.title = "Title"
    return app.index()

@server.route("/dash/<path>")
def MyDashApp(path):
    app.title = "Title: %s"%(path)
    return app.index()

if __name__ == '__main__':
    server.run(port=5000, host='0.0.0.0', debug=True)
4

+1 for this idea, it is a must!

2 Likes
5

+1 for a dcc.Title also, seems essential for a large project!

2 Likes
6

Is there any updates made to use for example “dcc.Title” to change the page title?

7

Is there any other workaround for this. It would be very useful for our use case.

8

Not really, the title is outside the react entry point so there’s not a nice way to update it using a callback.

Edit: this is obviously wrong after looking at the default DocumentTitle component https://github.com/plotly/dash/dash-renderer/src/components/core/DocumentTitle.react.js.

There’s a little bit of conflict here because the DocumentTitle component is already managing the window title. So I guess it needs to be modified so that we can create a callback to update the title.

9

Thanks!
I see, so it is taken over by the DocumentTitle component and unless there is a way to have a callback to DocumentTitle, it won’t be feasible.

10

Any update on this? Is it possible to have custom description meta tags and custom titles per page for Google search optimization? Would be very interested in a solution

1 Like
11

Yeah, it would be really nice – I understand the conundrum, but I think having a dcc.Title component (like dcc.Location) would be ideal.

As far as I can tell, the only reason it acts like it does currently is so that the title can be changed to “Updating…” during loading, but given the new dcc.Loading and loading state functionality, keeping it just for this seems like a poor compromise given how useful it would be to be able to customize via a callback. Just my own 2¢.

1 Like
13

+1 for a dcc.title component.

1 Like
14

+1 for a dcc.title component also!!

1 Like
15

one more vote for this, but was able to get it working with the example above, thanks!!!

1 Like
16

FYI - I’ve created an issue for this if any community member wants to take this on. It’s a very simple component and would be a place to get started with contributing to Dash Open Source :slightly_smiling_face: A dcc.DocumentTitle Component for Updating the Page Title Dynamically · Issue #833 · plotly/dash-core-components · GitHub

I’ve also included a clientside callbacks workaround that can be used in the meantime before this component is live.

1 Like
17

May be i am missing something.I tried the clientside callbacks workaround, does not seem to work. When i added an alert statement like below, i can see that the title changes to “tab-1/tab-2” but quickly gets reverted back to “Dash”. Looks like the browser tab title getting overridden somewhere.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = app.layout = html.Div([
html.Title(id=‘dummy’),
dcc.Tabs(id=‘tabs-example’, value=‘tab-1’, children=[
dcc.Tab(label=‘Tab one’, value=‘tab-1’),
dcc.Tab(label=‘Tab two’, value=‘tab-2’),
]),
html.Div(id=‘tabs-example-content’)
])
app.clientside_callback(
“”"
function(tab_value) {
document.title = tab_value;
alert(document.title)
return null; // dummy output
}
“”",
Output(‘dummy’, ‘children’),
[Input(‘tabs-example’, ‘value’)]
)

if name == ‘main’:
app.run_server(debug=True)

18

This feature is now available in dash==1.14.0 (📣 Dash v1.14.0 Released - Update the Tab's Title, Removing the "Updating..." Messages, Updated DataTable Link Behavior) and is documented in http://dash.plotly.com/external-resources. Look for the title= and update_title= . See the “Update the Document Title Dynamically based off of the URL or Tab” section.

2 Likes
19

Hi, thanks for the great work on this feature. There’s a small problem when I tried to set a new title. It needs chrome or other browsers doing hard reload (CTRL+Shift+R) to set a new app’s title. Is there’s anyone who has the same problem here?