VGR Styleguide

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.