Nav Tab Bar
The element enables easy, direct, and global navigation for products on Mobile and Tablets.
Mobile navigation that is displayed at the bottom of the page.
- Add an identification for the navigation using
aria-label -
Active item:
- Switch to the solid icon variation
- Add
aria-current="page"to indicate the active page on the navigation - Add
flix-nav-tab-bar__tab--activeto the active item to enable visual appearance
<nav class="flix-nav-tab-bar" aria-label="Main navigation" style="position:relative">
<a class="flix-nav-tab-bar__tab flix-nav-tab-bar__tab--active" aria-current="page" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-magnifier-solid"></i>
<span class="flix-nav-tab-bar__label">Search</span>
</a>
<a class="flix-nav-tab-bar__tab" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-offer"></i>
<span class="flix-nav-tab-bar__label">Offer</span>
</a>
<a class="flix-nav-tab-bar__tab" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-car"></i>
<span class="flix-nav-tab-bar__label">Rechtsschutzversicherungsgesellschaften</span>
</a>
<a class="flix-nav-tab-bar__tab" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-car"></i>
<span class="flix-nav-tab-bar__label">Rechtsschutzversicherungsgesellschaften</span>
</a>
<a class="flix-nav-tab-bar__tab" href="#">
<i class="flix-nav-tab-bar__icon flix-icon flix-icon-info"></i>
<span class="flix-nav-tab-bar__label">More</span>
</a>
</nav>