Internal Navigation

Todo

Roadmap

Menu Group: Menu Group Links

Component Preview
<nav role="navigation" aria-label="External Links" class="menu--group">
    <ul class="menu">
        <li class="menu-item"><a href="#" target="_blank" class="sf-depth-1 ">Alumni</a></li>

        <li class="menu-item"><a href="#" target="_blank" class="sf-depth-1 menuparent">Athletics</a></li>

        <li class="menu-item"><a href="#" target="_blank" class="sf-depth-1 menuparent">Health Care</a></li>

    </ul>
</nav>
  • Content:
    .menu--group {
      .menu {
        @include flexbox;
    
        @include margin($top: $lg, $left: 0, $bottom: $sm);
    
        li {
          @include flexbox;
          flex: 1;
          border: 1px solid $grey-light;
          border-right: none;
          justify-content: center;
    
          &:hover,
          &:focus {
            background: $light;
          }
    
          a {
            display: block;
            text-decoration: none;
            color: $med-gray;
            line-height: 1.3;
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 1rem;
    
            &:hover,
            &:focus {
              text-decoration: underline;
            }
          }
    
          &:last-child {
            border-right: 1px solid $grey-light;
          }
        }
      }
    }
    
    
    .menu--group a[target="_blank"]:after {
      content: "\f35d";
      @include fas();
      font-size: $small-font-size;
      color: $secondary;
      padding-left: $sm;
    }
    
  • URL: /components/raw/group/_group.scss
  • Filesystem Path: src/components/menus/group/_group.scss
  • Size: 920 Bytes