VGR Styleguide

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.