I want to change the default browser title when the user press my Lightning Component Tab. How can I do it?

In visualforce, I had the title attribute <apex:page title="My title">, but in Lightning Experience I found no way to accomplish this, the title is always Lightning Experience | Salesforce:

Browser title

Any ideas?

3 Answers 3


You should do that in init handler of component.


cmp file:

<aura:component implements="lightning:actionOverride,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:isUrlAddressable" access="GLOBAL">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />


controller JS:

    doInit : function(component, event, helper){
        document.title = "My Custom Component";


enter image description here

  • I fixed: I preferred to avoid this because of the locker service, but then I found that the title attribute is allowed: developer.salesforce.com/docs/component-library/tools/…. However, I did it in the Renderer file because I experienced that the title is not replaced upon tab changes if I just use the init event (eg: try to navigate to another component and back).
    – ctrl-z
    Aug 21, 2019 at 13:40
  • For navigation, you should be using pageReference Object. You should be handling it using change handler on pageReference object and not renderer. Renderer runs for every component.set - will have adverse effects on performance Aug 21, 2019 at 13:45
  • I mean standard navigation, changing salesforce tab and back, not "custom navigation" (with page references etc).
    – ctrl-z
    Aug 22, 2019 at 7:11

You can set the title in the initialization of your controller...

e.g. document.title = "Test"


The title attribute in <apex:page> will set the title of the window (since Summer '16).

To update the browser window title from a Visualforce page in Lightning Experience, you can send a message to the parent window:

window.parent.postMessage(JSON.stringify({"event":"force:setTitle","arguments":{"title": "NEW TITLE"}}) , window.location.ancestorOrigins[0]);

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .