Navbar

<nav class="vgr-navbar" 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-navbar__list vgr-unstyled-list">

                    <li class="vgr-navbar__list-item">
                        <a href="/" class="vgr-navbar__list-link">Hjälp</a>
                    </li>

                    <li class="vgr-navbar__list-item vgr-navbar__list-item--current">
                        <a href="/" class="vgr-navbar__list-link" aria-current="page">Sparade sökningar</a>
                    </li>

                    <li class="vgr-navbar__list-item">
                        <a href="/" class="vgr-navbar__list-link">Synpunkter</a>
                    </li>

                    <li class="vgr-navbar__list-item">
                        <a href="/" class="vgr-navbar__list-link">Sponsra en sida</a>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</nav>
<nav class="vgr-navbar" 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-navbar__list vgr-unstyled-list">
          {% for item in items %}
            {% if item.current %}
              <li class="vgr-navbar__list-item vgr-navbar__list-item--current">
                <a href="{{ item.url }}" class="vgr-navbar__list-link" aria-current="page">{{ item.text }}</a>
              </li>
            {% else %}
            <li class="vgr-navbar__list-item">
              <a href="{{ item.url }}" class="vgr-navbar__list-link">{{ item.text }}</a>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
      </div>
    </div>
  </div>
</nav>
{
  "items": [
    {
      "text": "Hjälp",
      "url": "/"
    },
    {
      "current": true,
      "text": "Sparade sökningar",
      "url": "/"
    },
    {
      "text": "Synpunkter",
      "url": "/"
    },
    {
      "text": "Sponsra en sida",
      "url": "/"
    }
  ]
}
  • Content:
    .vgr-navbar {
    
      /* Sizes */
      $list-font-size: $smallest-font-size;
      $list-default-space: .75rem .75rem !default;
    
      /* Colors */
      $list-background: #004674 !default;
      $list-link-color: #c1e1f6 !default;
    
      /* Current */
      $list-current-color: $color-white;
    
      /* Active (Hover and Focus state) */
      $list-active-color: $color-white;
    
      background: $list-background;
      font-size: $list-font-size;
    
      &__list {
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
      }
    
      &__list-item {
        display: flex;
    
        &--current {
          box-shadow: inset 0 -2px 0 $list-current-color;
    
          .vgr-navbar__list-link {
            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/navbar/_navbar.scss
  • Filesystem Path: components/navigation/navbar/_navbar.scss
  • Size: 950 Bytes

There are no notes for this item.