Tab bar

<nav class="vgr-tabbar" role="navigation">
    <div class="vgr-container">
        <div class="vgr-row">
            <div class="col-xs-12 col-md-10 col-lg-8 vgr-centered">
                <ul class="vgr-tabbar__list vgr-unstyled-list">

                    <li class="vgr-tabbar__list-item">
                        <a href="/" class="vgr-tabbar__list-link">Webb</a>
                    </li>

                    <li class="vgr-tabbar__list-item vgr-tabbar__list-item--current">
                        <a href="/" class="vgr-tabbar__list-link" aria-current="page">Dokument</a>
                    </li>

                    <li class="vgr-tabbar__list-item">
                        <a href="/" class="vgr-tabbar__list-link">Medarbetare</a>
                    </li>

                    <li class="vgr-tabbar__list-item">
                        <a href="/" class="vgr-tabbar__list-link">Organisation</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</nav>
<nav class="vgr-tabbar" role="navigation">
  <div class="vgr-container">
    <div class="vgr-row">
      <div class="col-xs-12 col-md-10 col-lg-8 vgr-centered">
        <ul class="vgr-tabbar__list vgr-unstyled-list">
          {% for item in items %}
            {% if item.current %}
              <li class="vgr-tabbar__list-item vgr-tabbar__list-item--current">
                <a href="{{ item.url }}" class="vgr-tabbar__list-link" aria-current="page">{{ item.text }}</a>
              </li>
            {% else %}
            <li class="vgr-tabbar__list-item">
              <a href="{{ item.url }}" class="vgr-tabbar__list-link">{{ item.text }}</a>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</nav>
{
  "items": [
    {
      "text": "Webb",
      "url": "/"
    },
    {
      "current": true,
      "text": "Dokument",
      "url": "/"
    },
    {
      "text": "Medarbetare",
      "url": "/"
    },
    {
      "text": "Organisation",
      "url": "/"
    }
  ]
}
  • Content:
    .vgr-tabbar {
    
      /* Sizes */
      $list-font-size: $medium-font-size;
      $list-default-space: 1rem .75rem !default;
    
      /* Colors */
      $list-background: $color-white !default;
      $list-link-color: $color-gray-600 !default;
    
      /* Current */
      $list-current-color: $color-gray-700 !default;
      $list-current-indicator-color: $theme-focus-color;
      $list-current-border-size: .25rem !default;
    
      /* Active (Hover and Focus state) */
      $list-active-color: $color-black;
    
      background: $list-background;
      font-size: $list-font-size;
    
      &__list {
        display: flex;
        flex-direction: row;
      }
    
      &__list-item {
        display: flex;
    
        .vgr-tabbar__list-link {
          color: $list-link-color;
        }
    
        &--current {
          box-shadow: inset 0 -5px 0 $list-current-indicator-color;
    
          .vgr-tabbar__list-link {
            font-weight: 700;
            color: $list-current-color;
          }
        }
      }
    
      &__list-link {
        display: block;
        width: 100%;
        text-decoration: none;
        color: $list-link-color;
        padding: $list-default-space;
    
        &:hover,
        &:focus {
          color: $list-active-color;
          text-decoration: underline;
        }
      }
    }
    
  • URL: /components/raw/tabbar/_tabbar.scss
  • Filesystem Path: components/navigation/tabbar/_tabbar.scss
  • Size: 1.1 KB

There are no notes for this item.