How can I add a Login link to the "Main navigation" menu?

When a user clicks on the link, it should take them to the /user/login page. Once they login, the link should change to say "Logout" instead of "Login".

Is there any way to add such a link?

  • I do not know which theme you are using, But Bootstrap 3 theme for drupal 8 does provide this feature by default. You can disable the My account item from the block. So the Main navigation bar will have the Login/Logout at right hand side and Login appear only when nobody is logged in and it will disappear when anybody is logged in.
    – CodeNext
    Commented Jul 12, 2016 at 16:01
  • I am using the Bootstrap 3 theme for Drupal 8. I did just what you did, disable the My account (User account menu) block, but there's no Login/Logout link at the right hand corner. Is there something I'm missing?
    – GTS Joe
    Commented Jul 14, 2016 at 17:34
  • I have just posted in answer section with image, so we can discuss on that further.
    – CodeNext
    Commented Jul 14, 2016 at 17:41
  • You do not have to disable the entire block? follow the steps with I have mentioned in the answer.
    – CodeNext
    Commented Jul 14, 2016 at 18:06

6 Answers 6


We don't need to depend on Bootstrap theme or our programming skills to move system "Log out" link on any other menu. Drupal allows us to make it easily.

edit Log out link

move on another menu

Additionally we can just create two custom "Log in me here please" and "Get me out of there" links with /user/login and /user/logout paths relatively. This is better because unlike the system "Log out" link it gives us to create as many log in/out links as we want with custom attributes. As the user logged in they'll see only "Log out" link and vice versa. The only caveat is that you will see probably both links together because you are logged in at the time of testing the links. And this is normal as you have "Link to any page" permission as administrator. Disable this permission and try again.


Long story short, you create 2 different Menu versions, one with login, another with logout, and give each version different visibility roles.

1) Edit menu, and add the Logout Link.

2) Now all you gotta do is configure your main menu link block enter image description here

Then in Roles, check mark ☑ Authenticated users and also ☑ Administrator

enter image description here

3) Now create another Menu (/admin/structure/menu) which has the "login" link and all other other menu links you need.

4) Then go to blocks (/admin/structure/block) in Primary Menu (Assuming you're using Bartik, may have a different name if you're using a custom theme) click add, and add the Menu you just created and configure it. This time for Roles, only check mark ☑ Anonymous

  • I did your suggestion, but the custom menu block I create breaks the link styles (I'm using the Bootstrap theme). Although it works functionality-wise, I can't use this method because it breaks the styles in the new menu block.
    – GTS Joe
    Commented Jul 11, 2016 at 6:44
  • Well don't give up. If the person who created the boostrap theme was able to add the boostrap divs to it, so can you :)
    – No Sssweat
    Commented Jul 11, 2016 at 6:47

There is a better way of doing this. What you want to do is create your own plugin and extend the MenuLinkDefault class. The best place to look is the Drupal/User module which provides the LoginLogoutMenuLink implementation.

You can either define your own plugin if you want to for instance change the text or logic. Alternatively, you can simply point it at the existing plugin to save yourself time and simply put the existing implmee. Here is some sample code:

Simple version:

  • Create my_module/my_module.links.menu.yml

      weight: 10
      menu_name: my-custom-menu
      class: Drupal\user\Plugin\Menu\LoginLogoutMenuLink

Advanced version:

  • Copy the plugin into your my_module/src/Plugin/Menu/ folder
  • Rename it from LoginLogoutMenuLink to MyLoginLogoutMenuLink
  • Update the namespace to reflect your location e.g. namespace Drupal\my_module\Plugin\Menu;
  • In the file change class LoginLogoutMenuLink extends MenuLinkDefault to class MyLoginLogoutMenuLink extends MenuLinkDefault
  • Create a my_module.links.menu.yml as per above but ensure you name the class as you have named it now and point it at your module. See example below.

Your my_module/src/Plugin/Menu/MyLoginLogoutMenuLink.php should look as follow:

namespace Drupal\my_module\Plugin\Menu;

use Drupal\Core\Menu\MenuLinkDefault;
use Drupal\Core\Menu\StaticMenuLinkOverridesInterface;
use Drupal\Core\Session\AccountInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;

 * A menu link that shows "Log in" or "Log out" as appropriate.
class MyLoginLogoutMenuLink extends MenuLinkDefault {

Your my_module/my_module.links.menu.yml should look as follow:

  weight: 10
  menu_name: my-custom-menu
  class: Drupal\my_module\Plugin\Menu\MyLoginLogoutMenuLink

I hope this helps someone.


You can do this with Bootstrap 3 Drupal 8 theme as that theme provide this feature by default. I am posting the image, of my drupal 8 trial site. One with Login page and one is with Logout page.

enter image description here

enter image description here

Are you looking such kind of thing?

Follow following steps.

1. Go to Structures>Blocks. And make sure the following configuration in the Navigation section.

enter image description here

2. Go to Structures>Menus>User Account Menu and disable the My account, like shown in the following image.

enter image description here

So, your Main Navigation menu should show only Login and Logout, as I have posted in the first pair of image.

  • Were you looking for this? did it work?
    – CodeNext
    Commented Jul 17, 2016 at 6:52

If you use Bootstrap subtheme you can modify this code to meet your needs:

<?php global $user; if ($user->uid): ?>   
    <a href="/user/logout" type="button" class="navbar-brand" role="button">Logout</a>
<?php endif; ?>    

<?php global $user; if (!$user->uid): ?>   
    <a href="/user" type="button" class="navbar-brand" role="button">Login</a>
<?php endif; ?>    

Put this code in page.tpl.php in subtheme/templates/ inside the block, where you need to:

< div class="navbar-header"> ... < /div>

I put it after the 90-line, in which case it does not collapse on a mobile device, if it is necessary that it should be folded after:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

Programmatically, you can accomplish this via your own module's .links.menu.yml file. The following places these links in the "Main" menu:

  title: 'Sign in'
  parent: system.menu.main
  description: 'Sign in'
  route_name: user.login
  weight: 100
  menu_name: main

  title: 'Sign out'
  parent: system.menu.main
  description: 'Sign out'
  route_name: user.logout
  weight: 101
  menu_name: main

Since the "route_name" that each of these is calling already specifies the logged in/out requirement (see https://api.drupal.org/api/drupal/core%21modules%21user%21user.routing.yml/8.4.x), the links will display depending on logged in status.

  • 1
    Doesn't work, still shows both links
    – No Sssweat
    Commented Sep 26, 2018 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.