Herman 6.0.1

Herman Navigation Components

[data-region='nav'] ul

scss 
[data-region='nav'] ul {
  list-style: none;
}

Remove list styles from navigation lists

.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-size: inherit;
  font-weight: bold;
  margin: tools.size('gutter-plus') 0 tools.size('shim');
  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} {
    background: linear-gradient(
        to right,
        tools.color('theme-light'),
        tools.color('theme-light')
      )
      no-repeat;
    background-size: 0 tools.size('nav-underline');
    background-position: bottom left;
    color: tools.color('background');
    line-height: 1.1;
    padding-bottom: tools.size('quarter-shim');
    text-decoration: none;
    transition:
      color 0.4s,
      background-size 0.4s;
  }

  #{config.$focus} {
    background-size: 100% tools.size('nav-underline');
  }

  &[data-nav='is-active'] {
    #{config.$link},
    #{config.$focus} {
      background-size: 100% tools.size('nav-underline');
    }
  }
}

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>