VGR Styleguide

Primary Navigation 

<div class="vgr-primary-navigation">
    <div class="vgr-container">
        <nav role="navigation">
            <ul class="vgr-unstyled-list vgr-clearfix">
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link" data-selected>Link 1</a>
                </li>
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link">Link 2</a>
                </li>
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link">Link 3</a>
                </li>
                <li class="vgr-primary-navigation__item">
                    <a href="/" class="vgr-primary-navigation__link">Link 4</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
 
<div class="vgr-primary-navigation">
  <div class="vgr-container">
    <nav role="navigation">
      <ul class="vgr-unstyled-list vgr-clearfix">
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link" data-selected>Link 1</a>
        </li>
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link">Link 2</a>
        </li>
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link">Link 3</a>
        </li>
        <li class="vgr-primary-navigation__item">
          <a href="/" class="vgr-primary-navigation__link">Link 4</a>
        </li>
      </ul>
    </nav>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .vgr-primary-navigation {

  $primary-navigation-text-color: $color-white;
  $primary-navigation-background-color: $theme-color-dark;


  background-color: $primary-navigation-background-color;
  color: $primary-navigation-text-color;
  font-size: $large-font-size;

  &__item {
    display: inline;
  }

  &__link {
    display: block;
    color: $primary-navigation-text-color;
    text-decoration: none;
    transition: .15s ease-out;

    &:hover,
    &:focus {
      background: $theme-color-darkest;
      color: $primary-navigation-text-color;
      box-shadow: inset 0 -4px 0 $primary-navigation-text-color;
    }
  }

  .selected {
    box-shadow: inset 0 -4px 0 #FF9400;
  }

  @media print {
    display: none;
  }
}
  • URL: /components/raw/primary-navigation/_primary-navigation.scss
  • Filesystem Path: components/navigation/primary-navigation/_primary-navigation.scss
  • Size: 728 Bytes
  • Handle: @primary-navigation
  • Preview:
  • Filesystem Path: components/navigation/primary-navigation/primary-navigation.html
  • Referenced by (1): @page

There are no notes for this item.