Herman 4.0.2

Herman Navigation Components

.nav-subsection

scss 
.nav-subsection {
  flex: 0 0 auto;

  &:last-of-type {
    flex: 1 0 auto;
  }

  & + .nav-item {
    border-top: 1px solid;
    margin-top: tools.size('double-gutter');
    padding-top: tools.size('gutter');
  }
}

Group the main navigation into sub-sections…

.nav-home

scss 
.nav-home {
  font-size: tools.size('large');
  font-weight: bold;
  margin-top: tools.size('gutter-plus');
}

There is a home link at the top of the navigation…

.nav-title

scss 
.nav-title {
  border-top: 1px solid;
  font-weight: bold;
  margin: tools.size('double-gutter') 0 tools.size('gutter');
  padding-top: tools.size('quarter-shim');
}

Each subsection may optionally have a title…

.nav-item

scss 
.nav-item {
  list-style: none;
  margin: tools.size('half-shim') 0;
}

Each list-item in the navigation menus…

[data-nav]

scss 
[data-nav] {
  #{config.$link} {
    color: tools.color('background');
    line-height: 1.1;
    padding-bottom: tools.size('quarter-shim');
    position: relative;
    text-decoration: none;
    transition: color 0.4s;

    // Animated underlines
    @include tools.before('') {
      @include tools.position(null null 0 0);
      background: tools.color('theme-light');
      height: tools.size('nav-underline');
      transform: scale3d(0, 1, 1);
      transform-origin: center left;
      transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
      transition-delay: 0.2s;
      width: 100%;
    }
  }

  #{config.$focus} {
    @include tools.before('') {
      transform: scale3d(1, 1, 1);
      transition-delay: 0s;
    }
  }

  &[data-nav='is-active'] {
    #{config.$link},
    #{config.$focus} {
      @include tools.before('') {
        transform: scale3d(1, 1, 1);
        transition-delay: 0s;
      }
    }
  }
}

Navigation items, with inactive and active states.

Example

html 
<div class="invert-colors" style="padding: 1em;">
  <a href="#" data-nav="is-not-active">not active</a><br />
  <a href="#" data-nav="is-active">active</a>
</div>