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 tab item

The tabs are button components 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
  • flix-nav-tab-bar__label add a wrapper around the text label (and optionally the badge)

Active items

  • Add aria-current="page" to indicate the active page on the navigation
  • Switch to the solid icon variation

New notification badge:**

  • Add the badge component inside the flix-nav-tab-bar__label wrapper, after the label
  • Add the flix-nav-tab-bar__badge as an extra class name to the badge, so the component can be styled properly
  • Use a reasonable text as sr-only that makes sense for the item in case, check the badge component for more details

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 href="#" class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab" aria-current="page">
    <flix-icon aria-hidden="true" class="flix-btn__icon flix-nav-tab-bar__icon" name="magnifier" solid></flix-icon>
    <span class="flix-nav-tab-bar__label">Search</span>
  </a>
  <a href="#" class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab">
    <flix-icon aria-hidden="true" class="flix-btn__icon flix-nav-tab-bar__icon" name="offer"></flix-icon>
    <span class="flix-nav-tab-bar__label">Offer</span>
  </a>
  <a href="#" class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab">
    <flix-icon aria-hidden="true" class="flix-btn__icon flix-nav-tab-bar__icon" name="car"></flix-icon>
    <span class="flix-nav-tab-bar__label">
      My rides
      <span class="flix-badge flix-nav-tab-bar__badge">
        1
        <span class="flix-sr-only">new notification</span>
      </span>
    </span>
  </a>
  <a href="#" class="flix-btn flix-btn--link flix-btn--stacked flix-nav-tab-bar__tab">
    <flix-icon aria-hidden="true" class="flix-btn__icon flix-nav-tab-bar__icon" name="info"></flix-icon>
    <span class="flix-nav-tab-bar__label">More</span>
  </a>
</nav>

Related Components

Related Guides