Springboard

Primary Navigation 

<nav class="nav" role="navigation" aria-label="site">
    <button hidden class="nav__menu-button">Menu</button>
    <ul class="nav__items">
        <li class="nav__item"><a class="nav__link" href="/"><img src="../../images/logo-full.svg" alt="Home"></a></li>
        <li class="nav__item "><a class="nav__link" href="#">Link 1</a></li>
        <li class="nav__item selected"><a class="nav__link" href="#">Link 2</a></li>
        <li class="nav__item "><a class="nav__link" href="#">Link 3</a></li>
    </ul>
</nav>
<script>
    (function() {
        if (window.matchMedia) {
            var button = document.querySelector('[aria-label="site"] button');
            var menu = button.nextElementSibling;
            var menuItems = menu.querySelectorAll("li");
            button.hidden = false;
            button.addEventListener('click', function() {
                var expanded = this.getAttribute('aria-expanded') === 'true';
                expandMenu(!expanded)
            });

            function expandMenu(expand) {
                button.setAttribute('aria-expanded', String(expand));
                for (var i = 0; i < menuItems.length; i++) {
                    if (i != 0) {
                        menuItems[i].hidden = !expand;
                    }
                }
            }

            function handleResize() {
                expandMenu(!mql.matches);
            }
            var mql = window.matchMedia("(max-width: 767px)");
            mql.addListener(handleResize);
            if (mql.matches) {
                button.setAttribute('aria-expanded', 'false');
                expandMenu(false);
            }
        }
    })();
</script>
 
<nav class="nav" role="navigation" aria-label="site">
  <button hidden class="nav__menu-button">Menu</button>
  <ul class="nav__items">
    <li class="nav__item"><a class="nav__link" href="/" ><img src="{{path "/images/logo-full.svg"}}" alt="Home"></a></li>
    {{#each links }}
    <li class="nav__item {{#if current }}selected{{/if}}"><a class="nav__link" href="{{ this.url }}" >{{ this.text }}</a></li>
    {{/each}}
  </ul>
</nav>
<script>
  (function() {
    if ( window.matchMedia ) {
      var button = document.querySelector('[aria-label="site"] button');
      var menu = button.nextElementSibling;
      var menuItems = menu.querySelectorAll( "li" );
      button.hidden = false;

      button.addEventListener('click', function() {
        var expanded = this.getAttribute('aria-expanded') === 'true';
        expandMenu( !expanded )
      });

      function expandMenu( expand ) {
        button.setAttribute('aria-expanded', String(expand));
        for ( var i = 0; i < menuItems.length; i++ ) {
          if ( i != 0 ) {
            menuItems[i].hidden = !expand;
          }
        }
      }

      function handleResize() {
        expandMenu( !mql.matches );
      }

      var mql = window.matchMedia( "(max-width: 767px)" );
      mql.addListener( handleResize );

      if ( mql.matches ) {
        button.setAttribute('aria-expanded', 'false');
        expandMenu( false );
      }
    }

  })();
</script>
 
{
  "links": [
    {
      "url": "#",
      "text": "Link 1"
    },
    {
      "url": "#",
      "text": "Link 2",
      "current": true
    },
    {
      "url": "#",
      "text": "Link 3"
    }
  ]
}
  • Content: 
    .nav {  
  margin: 0;
  padding: 0;
  position: relative;
}

.nav__items {
  margin: 0;
  padding: 0;
}

.nav__item {
  display: block;
  margin: 0;
  padding: 0;
}

.nav__item:first-child {
  display: block;

  img {
    display: block;
    height: 2em;
  }
}

.nav__item:nth-child(n + 2) {
  background: #eee;
}

[aria-expanded=true] + ul > li:first-child {
  border-bottom: solid 1px rgba(0,0,0,.1);
}

.nav__link,
.nav__link:link,
.nav__link:visited,
.nav__link:hover,
.nav__link:active {
  display: block;
  padding: 1rem;
  border: 0;
  border-bottom: solid 1px #ccc;
  background: none;
  text-shadow: none;
  text-decoration: none;
  color: #444;

    .selected & {
      color: #000;
      font-weight: bold;
    }

    .selected &::before {
      content: 'Current Page ';
      position: absolute;
      display: block;
      width: 1px;
      height: 1px;
      overflow: hidden;
      background: transparent;
    }
}

.nav__link:focus,
.nav__link:hover {
  background: #e6e6e6;
}

@include tablet {

  .nav__item:first-child {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem .5em;
    background: transparent;
  }

  [aria-expanded=true] + ul > li:first-child {
    border-bottom: none;
  }

  .nav__item:nth-child(n + 2) {
    background: transparent;
  }

  .nav__items {
    float: right;
    text-align: right;
    margin-top: 1rem;
    margin-right: 1rem;
    padding: 1rem;
  }

  .nav__item {
    display: inline-block;
  }

  .nav__link,
  .nav__link:link,
  .nav__link:visited,
  .nav__link:hover,
  .nav__link:active {
    display: inline-block;
    padding: .5rem;
    border: 0;
  }

  .nav__link:hover {
    text-decoration: underline;
  }

  .nav__link:hover {
    background: transparent;
  }

  .nav__link:focus {
    outline: dotted 1px $color-focus;
    background: transparent;
  }

}

.nav__menu-button,
.nav__menu-button:link,
.nav__menu-button:visited,
.nav__menu-button:hover,
.nav__menu-button:focus,
.nav__menu-button:active {
  float: right;
  padding: 1rem;
  margin: 0;
  border: 0;
  color: $color-soft-black;
  background: transparent;
  font-size: 75%;
  line-height: 2rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: none;
  transform: none;
  box-shadow: none;
  position: relative;
  z-index: 100;

  @include tablet {
    display: none;
  }
}

.nav__menu-button:focus {
  outline: dotted 1px $color-focus;
}
  • URL: /components/raw/nav/_sass.scss
  • Filesystem Path: components/02-modules/navigation/nav/_sass.scss
  • Size: 2.4 KB

There are no notes for this item.