I have added Custom global header component on my Community using the below code

<div class="slds-global-header__item">
                <ul class="slds-global-actions" style="margin-right: 40px;">

                    <li class="slds-global-actions__item">
                        <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
                            <button class="slds-button slds-global-actions__avatar slds-global-actions__item-action"
                                title="person name" onclick={handleshowloggOffButton} aria-haspopup="true">
                                <span class="slds-avatar slds-avatar_profile-image-large">
                                    <span class="slds-assistive-text">Person name</span>
                            <section if:true={showLoggOffButton} aria-describedby="dialog-body-id-14"
                                aria-label="My Favorites" class="slds-popover slds-nubbin_top slds-dynamic-menu"
                                role="dialog" style="position:absolute;left:-1rem;top:42px; width: 82px;">
                                <div class="slds-popover__body slds-p-horizontal_none" id="dialog-body-id-14">
                                    <div id="listbox-unique-id" role="listbox">
                                        <ul class="slds-listbox slds-listbox_vertical slds-dropdown_length-10"
                                            role="group" aria-label="My Favorites">
                                            <li role="presentation" class="slds-listbox__item">
                                                <a onclick={handleLogout}
                                                    class="slds-text-link_reset slds-text-link slds-align_absolute-center">Log
handleLogout() {
        var newURL =
            window.location.protocol +
            "//" +
            window.location.host +
          "/" +
        window.location.href = newURL + '/secure/logout.jsp';        

on click of log off It's showing Invalid Page. Can anyone help me what i am missing here.

  • Can you share what is the final you are getting? Dec 29, 2020 at 14:59

3 Answers 3

        type: 'comm__loginPage',
        attributes: {
            actionName: 'logout'

See documentation: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_page_reference_type


window.location.pathname returns a value that starts with /. Because you're also adding an additional / when combining the location values, you end up having a malformed url such as https://{communityName}.force.com//s/.

Because the logout page is within the same domain, could you just change this button into an anchor tag and set the href attribute to /secure/logout.jsp?


Logout should be done using the named page with the logout action. see this example:

import {LightningElement} from "lwc";
import {NavigationMixin} from "lightning/navigation";

    type: "comm__loginPage",
    attributes: {
        actionName: "logout"

export default class ComLogoutButton extends NavigationMixin(LightningElement) {
    logout() {

the template can look like this:

    <a onclick={logout}>
        <lightning-icon icon-name="utility:logout" alternative-text="Logout"> </lightning-icon>

for everyone else's convenience I have created a repo with a quick deploy option here: https://github.com/Henk3000/communityLogoutButton

You must log in to answer this question.

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