Tabbed nav

Tabbed nav is used in the top navigation to create a tabbed interface. Use .is-active on the <button> element to toggle active class.

Note

It's advised to trim the button texts to a certain max length. Excessivly long button texts might break the automatic shrinking behavior in some browsers.

Files

app/styles/modules/tabbed-nav/config.scss
app/styles/modules/tabbed-nav/style.scss

Base

Example:

Code:

<div class="tabbed-nav bar bar--nowrap bar--nospace mb-none">

  <div class="tabbed-nav__item bar__item bar__item--shrinkable border-right">
    <div class="tabbed-nav__btn-wrap">
      <button class="btn btn--large btn--navigation tabbed-nav__btn">
          // icon
          <span class="tabbed-nav__text"><span class="text-color-black text-ellipsis">Quellenzettel</span></span>
      </button>
    </div>
  </div>
  
  ...
  
  <div class="tabbed-nav__item bar__item bar__item--shrinkable border-right">
    <div class="tabbed-nav__btn-wrap">
      <button class="btn btn--large btn--navigation tabbed-nav__btn"><span class="icon icon-qz icon--left">
          // icon
          <span class="tabbed-nav__text"><span class="text-color-black text-ellipsis">Pressespiegel</span>
          <span class="text-color-grey text-small text-ellipsis">Erste Bank International</span></span>
      </button>
    </div>
  </div>

</div>

Closable button

To create a closable tabbed nav item, add .btn-closable to .tabbed-nav__btn-wrap.

Example:

Code:

<div class="tabbed-nav bar bar--nowrap bar--nospace mb-none">

  <div class="tabbed-nav__item bar__item bar__item--shrinkable border-right">
    <div class="btn-closable tabbed-nav__btn-wrap">
      <button class="btn btn--large btn--navigation tabbed-nav__btn">
          // icon
          <span class="tabbed-nav__text"><span class="text-color-black text-ellipsis">Quellenzettel</span></span>
      </button>
    </div>
  </div>
  
  ...
  
  <div class="tabbed-nav__item bar__item bar__item--shrinkable border-right">
    <div class="btn-closable tabbed-nav__btn-wrap">
      <button class="btn btn--large btn--navigation tabbed-nav__btn"><span class="icon icon-qz icon--left">
          // icon
          <span class="tabbed-nav__text"><span class="text-color-black text-ellipsis">Pressespiegel</span>
          <span class="text-color-grey text-small text-ellipsis">Erste Bank International</span></span>
      </button>
    </div>
  </div>

</div>