Dynamic window title

Currently all our admin app browser tabs are named in the same way; and the names in the browser history aren't really helpful neither:

Maybe we could add some useEffect code to https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/layout/Title.tsx that updates the document.title whenever new title is set? WDYT?

How I do it with my React Admin:

class SettingsList extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        document.title = "Some new document title.";
    }

    ......

And it shows that in the history and as the title.
But maybe a MaterialUI update version is better.

@jtomaszewski

@jtomaszewski Thanks for the suggestion! Would you mind creating a PR for it?

Is someone currently working on this? If not, I'd be happy to give it a shot

@djhi

@djhi I got carried away 😅

#6118

Fixed by #6119

@fzaninotto

@fzaninotto can we re-open this issue as the change was reverted. I'm going to give @wmwart's suggestion,

Yep, the fix was reverted in #6357, so I'm reopening it.

FYI, users can customize browser page title using react-helmet. See example code that can be placed in Show, Edit, List or Create components.

  <Helmet>
      <title>New page title</title>
  </Helmet>

FYI, users can customize browser page title using react-helmet. See example code that can be placed in Show, Edit, List or Create components.
  <Helmet>
      <title>New page title</title>
  </Helmet>

Ideally, the <Title/> component would automatically sent the title over to Helmet, rather than having users add the title to each page / view.

You can use react portals to inject the title into the <title> component of react-helmet, but unfortunately, RA adds an additional around the text, which messes up the header title.

It would be great if we can override the Title component as part of the customization / layout

@fzaninotto

@fzaninotto I'm interested to work on this issue. Before opening a new PR, I will discuss the details here.
For a start, I propose to make this feature an opt-in change. So by default it keep the same behavior as before.
So probably we should add a new boolean prop, eg. mirrorTitleToDocumentTitle={true}

React 19 introduces the <title> tag that does exactly that. If we can use if in a backward-compatible way (i.e. without breaking apps using React 18), it's the best solution. We could simply update PageTitle to set <title>in addition to the TitlePortal.

feat: Sync the browser tab title with the page title

Fixed #11412
will be available in v5.16.0 release

Navigation Menu

Dynamic window title #5893

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Dynamic window title #5893

Description

Activity

MicroJackson commented on Feb 11, 2021

djhi commented on Feb 11, 2021

andrico1234 commented on Apr 2, 2021

andrico1234 commented on Apr 2, 2021

fzaninotto commented on May 31, 2021

andrico1234 commented on Jul 5, 2021

fzaninotto commented on Jul 6, 2021

panfiva commented on Feb 1, 2022

btoro commented on Sep 14, 2022

lefuturiste commented on May 1, 2024

fzaninotto commented on May 14, 2024

ThieryMichel commented on Oct 26, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions