Menu icon Foundation
Split tab navigation

Hi, I have quite a basic setup on a single page website with a tabbed navigation along the top showing the tabs in the main area.

I would like to split the navigation into two sides:
On the left have the site navigation - Home, About, Blog etc.
On the right I have login, tools, settings etc.

I've set this up with nearly no problem. The tabs work with the lists being split (see below).

However, when I switch between the left and right options the 'active' class remains on the last item.
For example if I go from Home on the left to settings on the right, both elements will have the active class attached to them.

Is there anyway to relate the two lists to prevent this from happening? That is say both of these data-tab elements relate to XX tab-content.

<nav>
    <dl class="tabs" data-tab>
        <dd class="active"><a href="#dashboard" class="active">Home</a>
        </dd>
        <dd><a href="#about">About</a></dd>
        <dd><a href="#blog">Blog</a></dd>
    </dl>
    <dl class="tabs push-right" data-tab>
        <dd><a href="#login">Login</a></dd>
        <dd><a href="#settings">Settings</a></dd>
    </dl>
</nav>
            

         

tabstab

Hi, I have quite a basic setup on a single page website with a tabbed navigation along the top showing the tabs in the main area.

I would like to split the navigation into two sides:
On the left have the site navigation - Home, About, Blog etc.
On the right I have login, tools, settings etc.

I've set this up with nearly no problem. The tabs work with the lists being split (see below).

However, when I switch between the left and right options the 'active' class remains on the last item.
For example if I go from Home on the left to settings on the right, both elements will have the active class attached to them.

Is there anyway to relate the two lists to prevent this from happening? That is say both of these data-tab elements relate to XX tab-content.

<nav>
    <dl class="tabs" data-tab>
        <dd class="active"><a href="#dashboard" class="active">Home</a>
        </dd>
        <dd><a href="#about">About</a></dd>
        <dd><a href="#blog">Blog</a></dd>
    </dl>
    <dl class="tabs push-right" data-tab>
        <dd><a href="#login">Login</a></dd>
        <dd><a href="#settings">Settings</a></dd>
    </dl>
</nav>
            

         
Rafi Benkual over 5 years ago

It's hard to see what the issue is. http://codepen.io/rafibomb/pen/KLyFz I made a codepen for this. Can you add the content so we can see what you mean?

Also, I saw you used a push right-right class I assumed you are trying to float right. Adding the class of left or right does that in Foundation.

JOSH DE LA CRUZ over 4 years ago

@Rafi Benkual Hi I've been trying to make something similar but I couldn't find any solution.

I'm using tabs in a site and I duplicate the tabs at the bottom of every tabpanel to use as next and previous buttons. The bottom tabs (next & previous) work but they don't put the active class to the top tab-title. How can I make it work?

I wrote the code in codepen http://codepen.io/anon/pen/zGQQEO

Please, help me. Thank you!