There's a new version of UIDS!

UIDS - UI Design System

Top Menu

Todo

Roadmap

Menu Top: Menu Top Links

Component Preview 
<nav role="navigation" aria-label="Top Links" class="menu--top nav">
    <ul class="menu">
        <li><a href="/top-link">Apply</a></li>

        <li><a href="/top-link">Visit</a></li>

        <li><a href="/top-link">Request Info</a></li>

    </ul>
</nav>
  • Content: 
    .menu--top .menu li {
  display: flex; }
  .menu--top .menu li:nth-child(3) {
    display: none !important; }
    @media (min-width: 980px) {
      .menu--top .menu li:nth-child(3) {
        display: flex !important; } }
  .menu--top .menu li a {
    padding: 1.05rem;
    color: #fff; }
    @media (min-width: 980px) {
      .menu--top .menu li a {
        color: var(--brand-secondary); } }
    .menu--top .menu li a:hover, .menu--top .menu li a:focus {
      text-decoration: underline; }
    .iowa-bar--full .menu--top .menu li a {
      font-size: .9rem;
      padding-right: 0; }
      @media (min-width: 980px) {
        .iowa-bar--full .menu--top .menu li a {
          font-size: 1.2rem;
          padding-right: 1.05rem; } }
    .iowa-bar--narrow .menu--top .menu li a {
      padding: 0.8rem 1.05rem; }

.iowa-bar--narrow .menu--top {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); }
  @media (min-width: 980px) {
    .iowa-bar--narrow .menu--top {
      position: static !important;
      clip: auto;
      height: auto;
      width: auto;
      overflow: auto;
      overflow: unset;
      position: absolute !important; } }

.menu--top.nav {
  margin-top: 7px;
  position: absolute;
  z-index: 2;
  right: 96px;
  top: 0;
  display: block; }
  @media (min-width: 768px) {
    .menu--top.nav {
      margin-top: 9px; } }
  @media (min-width: 980px) {
    .menu--top.nav {
      right: 356px;
      margin-top: 11px; } }

.iowa-bar--narrow .nav.menu--top {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0px;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0; }

.nav.menu--top .menu li a {
  font-weight: 300; }
  • URL: /components/raw/top/top.css
  • Filesystem Path: src/components/menus/top/top.css
  • Size: 1.7 KB
  • Content: 
    @import '../../../assets/scss/variables';
@import '../../../assets/scss/utilities';

.menu--top {
  .menu {
    li {
      display: flex;
      &:nth-child(3) {
        display: none !important;

        @include breakpoint(md) {
          display: flex !important;
        }
      }

      a {
        padding: $md;
        color: #fff;
        @include breakpoint(md) {
          color: $secondary;
        }
         &:hover,
         &:focus {
           text-decoration: underline;
         }
        .iowa-bar--full & {
          font-size: .9rem;
          padding-right: 0;
          @include breakpoint(md) {
          font-size: 1.2rem;
          padding-right: $md;
          }
        }

        .iowa-bar--narrow & {
          padding: .8rem $md;
        }

        &:hover {}
      }
    }
  }
}

.iowa-bar--narrow {
  .menu--top {
      @include element-invisible;
        @include breakpoint(md) {
          @include element-invisible-off;
          overflow: unset;
          position: absolute !important;
    }
  }
}

.menu--top.nav {
  margin-top: 7px;
  position: absolute;
  z-index: 2;
  right: 96px;
  top: 0;
  display: block;

  @include breakpoint(sm) {
    margin-top: 9px;
  }

  @include breakpoint(md) {
    right: 356px;
    margin-top: 11px;
  }
}

.iowa-bar--narrow .nav.menu--top {
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0px;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
}

.nav.menu--top .menu li a {
  font-weight: $font-weight-light;
}
  • URL: /components/raw/top/top.scss
  • Filesystem Path: src/components/menus/top/top.scss
  • Size: 1.5 KB