Topic: Tabs with Nav Pills to navigate to different url

needledrag free asked 4 years ago

Hi, I'm trying to use a tablist and nav-pills to create a navigation menu but can't seem to get my head around making it navigate to another page instead of a hashe 'anchor' on the same page. Is this possible? I found a question on here that mentioned adding an event listener or hashchange and using a javascript funtion to navigate to another pages tab but that doesn't seem to work either.

Any other options?

Any help appreciated.

Cheers Shaun

    <div class="row">
        <div class="col-3" role="navigation" >
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#/user/client/getuserclientlist" role="tab"
                   aria-controls="v-pills-home" aria-selected="true">Clients</a>
                <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill"  href="#/User/AccSettings/Index" role="tab"
                   aria-controls="v-pills-profile" aria-selected="false">Settings</a>
                <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill"  href="#/User/Palette/Index" role="tab"
                   aria-controls="v-pills-messages" aria-selected="false">Palette</a>
                <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#/User/Home/Index" role="tab"
                   aria-controls="v-pills-settings" aria-selected="false">Home</a>

Mateusz Łubianka staff answered 4 years ago

Hi @needledrag,

To navigate to another page try to remove data-toggle="pill" and add page adress in href attribute:

<a class="nav-link active" id="v-pills-home-tab" href="" target="_blank" role="tab" aria-controls="v-pills-home" aria-selected="true">Clients</a>


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 jQuery
  • MDB Version: 4.12.0
  • Device: laptop
  • Browser: chrome
  • OS: windows 8
  • Provided sample code: No
  • Provided link: Yes