How to add a Login / Logout link in Main navigation menu?

Question

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?

Answer 1

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.

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.

Answer 2

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

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

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

Answer 3

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

  my_module.logout:
    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:

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

I hope this helps someone.

Answer 4

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.

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.

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

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

Answer 5

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">

Answer 6

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

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

mymodule.sign_out:
  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.