University of Staffordshire Pattern Library

Side Navigation

No notes defined.

<nav class="side-nav  col-1/4@tablet  col-full@mobile" aria-label="Section navigation">
    <div class="title  title--bg-red">
        <h2 class="title__highlight h6"><a href="/onboarding/before-you-start/">Before you start</a></h2>
    </div>
    <ul class="side-nav__list  list--unstyled">
        <li>
            <a class="side-nav__link" href="/onboarding/before-you-start/first-day-essentials" title="First day essentials" data-menu-order="1">First day essentials</a>
        </li>
        <li class="side-nav__current" data-menu-order="2">
            HR checklist
        </li>
        <li>
            <a class="side-nav__link" href="/onboarding/before-you-start/onboarding-and-probation" title="Onboarding and probation" data-menu-order="3">Onboarding and probation</a>
        </li>
        <li>
            <a class="side-nav__link" href="/onboarding/before-you-start/mandatory-training" title="Mandatory training" data-menu-order="4">Mandatory training</a>
        </li>
    </ul>
</nav>
 
<nav class="side-nav  col-1/4@tablet  col-full@mobile" aria-label="Section navigation">
    <div class="title  title--bg-red">
        <h2 class="title__highlight h6"><a href="/onboarding/before-you-start/">Before you start</a></h2>
    </div>
    <ul class="side-nav__list  list--unstyled">
        <li>
            <a class="side-nav__link" href="/onboarding/before-you-start/first-day-essentials" title="First day essentials" data-menu-order="1">First day essentials</a>
        </li>
        <li class="side-nav__current" data-menu-order="2">
            HR checklist
        </li> 
        <li>
            <a class="side-nav__link" href="/onboarding/before-you-start/onboarding-and-probation" title="Onboarding and probation" data-menu-order="3">Onboarding and probation</a>
        </li>
        <li>
            <a class="side-nav__link" href="/onboarding/before-you-start/mandatory-training" title="Mandatory training" data-menu-order="4">Mandatory training</a>
        </li>
    </ul>
</nav>
  • Content: 
    .side-nav {
    @media (min-width: map-get($breakpoint-stages, 'tablet')) {
        margin-left: $spacing-md;
    }

    &__list {
        border-bottom: 2px solid $red;
        border-top: 2px solid $red;
        padding: $spacing-lg 0;
    }

    &__current {
        font-weight: 500;
    }

    & .title {
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: $spacing-lg;
    }

    .title__highlight {
        color: white;
        & > a {
            color: white;
        }
    }

    & h2 {
        margin-bottom: $spacing-xs;
    }
}
  • URL: /components/raw/side-navigation/_side-navigation.scss
  • Filesystem Path: src\components\side-navigation\_side-navigation.scss
  • Size: 594 Bytes