There's a new version of UIDS!

UIDS - UI Design System

Main Menu

Todo

Roadmap

Main Menu

Component Preview 
<div class="menu-container ">
    <nav role="navigation" aria-labelledby="main-menu" class="nav menu-wrapper">
        <h2 id="main-menu" class="element-invisible">Additional Navigation</h2>
        <ul class="menu">
            <li class="item--first"> <a href="#" class="">Admissions</a>
            </li>
            <li class="menuparent--active is-active"> <a href="#" class="">Academics</a>
                <ul class="menu">
                    <li class=""><a href="#" class="">Undergraduate</a></li>
                    <li class=""><a href="#" class="">Graduate</a></li>
                    <li class=""><a href="#" class="">International</a></li>
                    <li class=""><a href="#" class="">Distance and online</a></li>
                    <li class=""><a href="#" class="">Cost and aid</a></li>
                </ul>
            </li>
            <li class=""> <a href="#" class="">Research</a>
            </li>
            <li class=""> <a href="#" class="">About</a>
            </li>
        </ul>
    </nav>
</div>
  • Content: 
    .nav .menu, .menu-wrapper .menu {
  list-style-type: none;
  padding: 0;
  margin: 0; }
  .nav .menu > li, .menu-wrapper .menu > li {
    display: inline-block;
    list-style-type: none;
    margin: 0; }

.nav .menu a,
.nav .menu span, .menu-wrapper .menu li a,
.menu-wrapper .menu li span {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@media (min-width: 768px) {
  .nav {
    align-items: center;
    display: flex; } }

.nav .menu {
  overflow: visible;
  font-size: 1rem;
  display: flex; }
  .nav .menu a,
  .nav .menu span {
    position: relative;
    display: inline-block;
    transition: background 0.8s ease-out;
    text-decoration: none;
    color: var(--brand-secondary); }

@media (min-width: 768px) {
  .menu-wrapper {
    align-items: center;
    display: flex; } }

.menu-wrapper > .menu > li.menu-item--expanded > a + ul {
  padding-bottom: 1.05rem; }

@media (min-width: 768px) {
  .menu-wrapper > .menu > li:first-child a {
    padding-top: 0.325rem; } }

.menu-wrapper .menu {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  font-size: 1.1rem;
  flex-basis: 100%; }
  .menu-wrapper .menu li {
    display: block;
    margin-bottom: 0;
    line-height: 1.3;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    border-bottom: 1px solid rgba(202, 202, 202, 0.5);
    display: block; }
    [class*="bg--black"] .menu-wrapper .menu li,
    [class*="bg--gold"] .menu-wrapper .menu li {
      border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
    @media (min-width: 768px) {
      .menu-wrapper .menu li {
        width: auto;
        margin-bottom: 0; } }
    [class*="bg--white"] .menu-wrapper .menu li a,
    [class*="bg--"] [class*="bg--white"] .menu-wrapper .menu li a,
    [class*="bg--gray"] .menu-wrapper .menu li a,
    [class*="bg--"] [class*="bg--gray"] .menu-wrapper .menu li a {
      color: #333; }
    .menu-wrapper .menu li li {
      font-size: 1.1rem;
      display: list-item; }
      .menu-wrapper .menu li li a, .menu-wrapper .menu li li span {
        color: #333;
        border-bottom: none;
        display: block;
        position: relative;
        padding-top: 1.05rem;
        padding-right: 1.05rem;
        padding-bottom: 1.05rem;
        padding-left: 0; }
        .menu-wrapper .menu li li a:focus, .menu-wrapper .menu li li a:hover, .menu-wrapper .menu li li span:focus, .menu-wrapper .menu li li span:hover {
          text-decoration: underline; }
    .menu-wrapper .menu li:last-child {
      border-bottom: none; }
    .menu-wrapper .menu li.is-active > a {
      font-weight: bold; }
    .menu-wrapper .menu li:last-of-type {
      border-bottom: none; }
    .menu-wrapper .menu li a,
    .menu-wrapper .menu li span {
      position: relative;
      display: inline-block;
      transition: background 0.8s ease-out;
      text-decoration: none;
      color: var(--brand-secondary);
      word-break: break-word;
      padding-top: 1.05rem;
      padding-right: 1.05rem;
      padding-bottom: 1.05rem;
      padding-left: 0; }
      [class*="bg--black"] .menu-wrapper .menu li a, [class*="bg--black"]
      .menu-wrapper .menu li span {
        color: #f3f3f3; }
      .menu-wrapper .menu li a.is-active,
      .menu-wrapper .menu li span.is-active {
        font-weight: bold; }
        .menu-wrapper .menu li a.is-active::after,
        .menu-wrapper .menu li span.is-active::after {
          background: transparent;
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          height: 4px;
          transform-origin: center;
          transition: transform 0.3s ease-in-out;
          transform: translate(-50%, 0) scaleX(1); }
      .menu-wrapper .menu li a:focus, .menu-wrapper .menu li a:hover,
      .menu-wrapper .menu li span:focus,
      .menu-wrapper .menu li span:hover {
        text-decoration: underline; }
  [class*="bg--black"] .menu-wrapper .menu li,
  .bg-pattern--brain-black .menu-wrapper .menu li {
    border-color: rgba(255, 255, 255, 0.225); }
    [class*="bg--black"] .menu-wrapper .menu li a,
    .bg-pattern--brain-black .menu-wrapper .menu li a {
      color: #fff; }
  .menu-wrapper .menu ul.menu {
    margin-left: 1.5rem;
    padding-bottom: 0.625rem; }
    @media (min-width: 768px) {
      .menu-wrapper .menu ul.menu {
        margin-left: 0; } }
    .menu-wrapper .menu ul.menu li {
      border-bottom: none;
      font-size: 1rem;
      list-style: disc; }
      @media (min-width: 768px) {
        .menu-wrapper .menu ul.menu li {
          list-style: none; } }
      .menu-wrapper .menu ul.menu li > a,
      .menu-wrapper .menu ul.menu li > span {
        padding: 0.625rem; }
        @media (min-width: 768px) {
          .menu-wrapper .menu ul.menu li > a,
          .menu-wrapper .menu ul.menu li > span {
            padding-top: 0.625rem;
            padding-right: 1.05rem;
            padding-bottom: 0.625rem;
            padding-left: 1.2rem; } }
        @media (min-width: 768px) {
          .menu-wrapper .menu ul.menu li > a::before,
          .menu-wrapper .menu ul.menu li > span::before {
            content: "\f105";
            font-size: 0.9rem;
            left: 0;
            position: absolute;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            font-style: normal;
            font-variant: normal;
            text-rendering: auto;
            line-height: 1;
            font-family: "Font Awesome 5 Free";
            font-weight: 900; } }
    .menu-wrapper .menu ul.menu li li a, .menu-wrapper .menu ul.menu li li span {
      opacity: 0.8; }
    .menu-wrapper .menu ul.menu ul.menu {
      margin-left: 2rem; }
      @media (min-width: 768px) {
        .menu-wrapper .menu ul.menu ul.menu {
          margin-left: 3rem; } }
      .menu-wrapper .menu ul.menu ul.menu li {
        list-style: circle; }
        @media (min-width: 768px) {
          .menu-wrapper .menu ul.menu ul.menu li {
            list-style: disc; } }
      .menu-wrapper .menu ul.menu ul.menu li a,
      .menu-wrapper .menu ul.menu ul.menu li span {
        padding-left: 0.5rem; }
        .menu-wrapper .menu ul.menu ul.menu li a::before,
        .menu-wrapper .menu ul.menu ul.menu li span::before {
          content: ""; }
      .menu-wrapper .menu ul.menu ul.menu ul.menu {
        margin-left: 1.5rem; }
        .menu-wrapper .menu ul.menu ul.menu ul.menu li {
          list-style: square; }
          @media (min-width: 768px) {
            .menu-wrapper .menu ul.menu ul.menu ul.menu li {
              list-style: circle; } }
        .menu-wrapper .menu ul.menu ul.menu ul.menu li a,
        .menu-wrapper .menu ul.menu ul.menu ul.menu li span {
          padding-left: 0.5rem; }
          .menu-wrapper .menu ul.menu ul.menu ul.menu li a::before,
          .menu-wrapper .menu ul.menu ul.menu ul.menu li span::before {
            content: ""; }
  • URL: /components/raw/main-menu/main-menu.css
  • Filesystem Path: src/components/menus/main-menu/main-menu.css
  • Size: 7 KB
  • Content: 
    @import "../../../assets/scss/variables";
@import "../../../assets/scss/utilities";

// Used by other menus
.nav {
  @include breakpoint(sm) {
    align-items: center;
    @include flexbox;
  }

  .menu {
    overflow: visible;
    font-size: $base-font-size;
    @extend %no-ul-list;
    @include flexbox;

    a,
    span {
      position: relative;
      display: inline-block;
      transition: background 0.8s ease-out;
      text-decoration: none;
      color: $secondary;
      @extend %font-smoothing-on;
    }
  }
}
// Used by vertical and horizontal secondary menus
.menu-wrapper {
  @include breakpoint(sm) {
    align-items: center;
    @include flexbox;
  }

  > .menu > li.menu-item--expanded > a + ul {
    padding-bottom: $md;
  }

  > .menu > li:first-child {
    a {
      @include breakpoint(sm) {
        padding-top: $xsm;
      }
    }
  }

  .menu {
    position: relative;
    @include flexbox;
    @include flex-direction(column);
    overflow: visible;
    font-size: 1.1rem;
    @extend %no-ul-list;
    flex-basis: 100%;

    li {
      display: block;
      margin-bottom: 0;
      line-height: 1.3;
      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
      border-bottom: 1px solid rgba($grey-light, .5);
      display: block;

      [class*="bg--black"] &,
      [class*="bg--gold"] & {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      }
      @include breakpoint(sm) {
        width: auto;
        margin-bottom: 0;
      }

      a {
        [class*="bg--white"] &,
        [class*="bg--"] [class*="bg--white"] &,
        [class*="bg--gray"] &,
        [class*="bg--"] [class*="bg--gray"] & {
          color: #333;
        }
      }

      li {
        font-size: 1.1rem;
        display: list-item;

        a, span {
          color: #333;
          border-bottom: none;
          display: block;
          position: relative;
          @include padding($top: $md, $right: $md, $bottom: $md, $left: 0);

          &:focus,
          &:hover {
            text-decoration: underline;
          }
        }
      }

      &:last-child {
        border-bottom: none;
      }

      &.is-active > a {
        font-weight: bold;
      }

      &:last-of-type {
        border-bottom: none;
      }

      a,
      span {
        position: relative;
        display: inline-block;
        transition: background 0.8s ease-out;
        text-decoration: none;
        color: $secondary;
        @extend %font-smoothing-on;
        word-break: break-word;
        @include padding($top: $md, $right: $md, $bottom: $md, $left: 0);

        [class*="bg--black"] & {
          color: $light;
        }

        &.is-active {
          font-weight: bold;

          &::after {
            background: transparent;
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            height: 4px;
            transform-origin: center;
            transition: transform 0.3s ease-in-out;
            transform: translate(-50%, 0) scaleX(1);
          }
        }

        &:focus,
        &:hover {
          text-decoration: underline;
        }
      }
    }

    [class*="bg--black"] &,
    .bg-pattern--brain-black & {
      li {
        border-color: rgba(255, 255, 255, 0.225);

        a {
          color: #fff;
        }
      }
    }
    // second level
    & ul.menu {
      margin-left: 1.5rem;
      @include breakpoint(sm) {
        margin-left: 0;
      }
      padding-bottom: $sm;

      & li {
        border-bottom: none;
        font-size: $base-font-size;
        list-style: disc;
        @include breakpoint(sm) {
          list-style: none;
        }

        & > a,
        & > span {
          padding: $sm;
          @include breakpoint(sm) {
            @include padding($top: $sm, $right: $md, $bottom: $sm, $left: 1.2rem);
          }

          &::before {
            @include breakpoint(sm) {
              content: "\f105";
              font-size: 0.9rem;
              left: 0;
              position: absolute;
              @include fas();
            }
          }
        }
      }

      & li li {
        a, span {
          opacity: 0.8;
        }
      }
      // third level
      ul.menu {
        margin-left: 2rem;
        @include breakpoint(sm) {
          margin-left: 3rem;
        }

        li {
          list-style: circle;
          @include breakpoint(sm) {
            list-style: disc;
          }
        }

        li a,
        li span {
          padding-left: 0.5rem;

          &::before {
            content: "";
          }
        }
        // fourth level
        ul.menu {
          margin-left: 1.5rem;

          li {
            list-style: square;
            @include breakpoint(sm) {
              list-style: circle;
            }
          }

          li a,
          li span {
            padding-left: 0.5rem;

            &::before {
              content: "";
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/main-menu/main-menu.scss
  • Filesystem Path: src/components/menus/main-menu/main-menu.scss
  • Size: 5 KB