Skip to main contentSkip to site searchSkip to component search
Honeycomb

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.

Please remember to add an identification for the navigation using aria-label;

The tabs are buttons with the following modifiers:

  • --link to make them nice and clean,
  • --stacked shows icon and text in a column layout,
  • flix-nav-tab-bar__tab adds necessary styling to make the button look good in the nav tab bar.

For active items:

  • Add aria-current="page" to indicate the active page on the navigation;
  • Switch to the solid icon variation (either via prop for web components or by providing a -solid CSS class name for icon font based icons).

Due to the limited width of the Nav Tab Bar, please make sure to use short text labels for the items, specially if you have more than 3 items.

Notice: the position: relative used in the example bellow is here only to make the example work nicely and is not needed in production.

<nav class="flix-nav-tab-bar" aria-label="Main navigation" style="position:relative">
  <a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#" aria-current="page">
    <flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="magnifier" solid=""></flix-icon>
    <span class="flix-nav-tab-bar__label">Search</span>
  </a>
  <a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#">
    <flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="offer"></flix-icon>
    <span class="flix-nav-tab-bar__label">Offer</span>
  </a>
  <a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#">
    <flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="car"></flix-icon>
    <span class="flix-nav-tab-bar__label">My rides</span>
  </a>
  <a class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" href="#">
    <flix-icon class="flix-btn__icon flix-nav-tab-bar__icon" aria-hidden="true" name="info"></flix-icon>
    <span class="flix-nav-tab-bar__label">More</span>
  </a>
</nav>