Lehigh Clutch Style Guide

Local Navigation 

<ul class="nav local_nav">
    <li class="nav-item active">
        <a class="nav-link" href="#">Active Page</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Page One</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Page Two</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Page Three</a>
    </li>
</ul>
 
<ul class="nav local_nav">
  {% for local_nav_item in local_nav_items %}
  <li class="nav-item{% if local_nav_item.active == true %} active{% endif %}">
    <a class="nav-link" href="{{ local_nav_item.url }}">{{ local_nav_item.link_text }}</a>
  </li>
  {% endfor %}
</ul>
 
{
  "local_nav_items": {
    "1": {
      "link_text": "Active Page",
      "url": "#",
      "active": true
    },
    "2": {
      "link_text": "Page One",
      "url": "#"
    },
    "3": {
      "link_text": "Page Two",
      "url": "#"
    },
    "4": {
      "link_text": "Page Three",
      "url": "#"
    }
  }
}
  • Content: 
    .local_nav {
  .nav-item {
    .nav-link {
      color: $grey_darkest;
      border-bottom: 0;
      font-weight: normal;

      .color-scheme-dark & {
        color: $white;
      }

      &:first-of-type {
        padding: $space_one_half $spacer $space_one_half 0;
      }

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

    &.active {
      .nav-link {
        font-weight: bold;
      }
    }
  }
}
  • URL: /components/raw/local_navigation/local_navigation.scss
  • Filesystem Path: bits/04-components/_local_navigation/local_navigation.scss
  • Size: 439 Bytes

No notes defined.