Nested tabs not showing active link

I have nested tabs. The outer tabbar is working fine, and the active tab is indicated. But the inner tabs are not indicating the active tab.

Here is the code for the inner tabbar

<template>
  <div class="page" data-name="home">
  <!-- Top Navbar -->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="link icon-only panel-open" data-panel="left">
            <i class="icon f7-icons if-not-md">menu</i>
            <i class="icon material-icons if-md">menu</i>
          </a>
      </div>
      <div class="title sliding">Sauti Café</div>
        <div class="subnavbar">
          <div class="subnavbar-inner">
            <div class="toolbar toolbar-top tabbar tabbar-labels">
              <div class="toolbar-inner">
                <a href="#tab-artists" class="tab-link tab-link-active">
                  <i class="icon f7-icons if-not-md">home_fill</i>
                  <i class="icon material-icons if-md">person_outline</i>
                  <span class="tabbar-label">Artists</span>
                </a>
                <a href="#tab-music" class="tab-link">
                  <i class="icon f7-icons if-not-md">list_fill</i>
                  <i class="icon material-icons if-md">library_music</i>
                  <span class="tabbar-label">Music</span>
                </a>
                <a href="#tab-trending" class="tab-link">
                  <i class="icon f7-icons if-not-md">settings_fill</i>
                  <i class="icon material-icons if-md">trending_up</i>
                  <span class="tabbar-label">Trending</span>
                </a>
                <a href="#tab-fresh" class="tab-link">
                  <i class="icon f7-icons if-not-md">fire_fill</i>
                  <i class="icon f7-icons if-md">fire_fill</i>
                  <span class="tabbar-label">Fresh</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    ...

What am I doing wrong?

Возможно, у вас дублирование ID.

No. The IDs are okay. The tabs open properly, but do not indicate “active” tab.

Can you create a minimal JSFiddle with the issue?

Here is The jsfiddle

I thinks it’s because the tab buttons are wrapped a subnavbar, which is not a direct sibling of the page content. If I move the toolbar below the navbar, it works as expected. Although I don’t known the exact difference regarding a subnavbar.

Updates jsfiddle: https://jsfiddle.net/xLpuakr0/1/

That has worked well. Thank you.

You’re welcome. Maybe @nolimits4web can explain if tabs should indeed not be put inside subnavbar? And in which situation subnavbar can be used? I’m curious as well :slight_smile:

Well, actually it works in original example if you inspect the code. The visual issue there is that Subnavbar’s height is smaller than Tabbar’s one, so the “active” line is just out of the Subnavbar and not visible.

Subnavbar is more for the case with just having custom links or buttons, while tabbar is specifically designed for such tab links

1 Like