Topic: Navbar with pills loses selection

mark goldin free asked 4 years ago

I am creating the following horizontal navbar: enter image description here

When Settings is clicked as it is shown another Tabs navigation appears: enter image description here

But if select a tab then the navbar loses the selection: enter image description here

How can I keep selections on the navbar regardless of clicking anywhere on the screen? BTW, the same practically code without your framework works as expected.

Here is my navbar code:

<nav class="nav nav-pills">
            <a href="#" class="nav-item nav-link" data-toggle="tab" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                <i class="fa fa-lg fa-home"></i> Home
            <a href="#" class="nav-item nav-link" data-toggle="tab" routerLink="/alerts">
                <i class="fa fa-lg fa-bell"></i> Alerts
            <a href="#" class="nav-item nav-link" data-toggle="tab">
                <i class="fa fa-lg fa-line-chart"></i> Reports
            <a href="#" class="nav-item nav-link" data-toggle="tab" routerLink="/settings" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
              <i class="fa fa-lg fa-cog"></i> Settings


<div id="tabs">
    <div class="row">
                <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
        <a class="nav-item nav-link" id="nav-syspref-tab" data-toggle="tab" href="#" role="tab" routerLinkActive="active"
        routerLink="syspref">Default Preferences</a>
        <a class="nav-item nav-link" id="nav-userpref-tab" data-toggle="tab" href="#" role="tab" routerLinkActive="active"
        routerLink="userpref">User Preferences</a>


Konrad Stępień staff answered 4 years ago

Hi @mark goldin,

You probalby use components from jQuery.

Please follow this link Tabs & Pills for more info about these components in angular technology.

Best, Konrad

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.9.0
  • Device: PC
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No