600 West

Nav: Vertical Lighter Nav 

<nav id="" class="Nav Nav--vertical Nav--light">
    <ul>
        <li><a class="" href="//sproutsocial.com/social-media-engagement">
    Engagement
</a>
        </li>

        <li><a class="" href="//sproutsocial.com/social-media-monitoring">
    Monitoring
</a>
        </li>

        <li><a class="" href="//sproutsocial.com/social-media-listening">
    Listening
</a>
        </li>

        <li><a class="" href="/600-west/components/preview/nav--horizontal.html">
    Active Page
</a>
        </li>

        <li><a class="" href="//sproutsocial.com/social-media-publishing">
    Publishing
</a>
        </li>

    </ul>
</nav>
 
<nav
    id="{{id}}"
    class="Nav {{modifier}}"
    {{#if style}}style="{{style}}"{{/if}}
>
    <ul>
        {{> @children}}
    </ul>
</nav>
 
{
  "children": [
    {
      "component": "nav-item",
      "context": {
        "text": "Engagement",
        "href": "//sproutsocial.com/social-media-engagement"
      }
    },
    {
      "component": "nav-item",
      "context": {
        "text": "Monitoring",
        "href": "//sproutsocial.com/social-media-monitoring"
      }
    },
    {
      "component": "nav-item",
      "context": {
        "text": "Listening",
        "href": "//sproutsocial.com/social-media-listening"
      }
    },
    {
      "component": "nav-item",
      "context": {
        "text": "Active Page",
        "href": "/600-west/components/preview/nav--horizontal.html"
      }
    },
    {
      "component": "nav-item",
      "context": {
        "text": "Publishing",
        "href": "//sproutsocial.com/social-media-publishing"
      }
    }
  ],
  "modifier": "Nav--vertical Nav--light"
}
  • Content: 
    .Nav {
    ul {
        @include unstyled-list;
        li {
            margin: 0;
        }
    }
}

/**
* Nav--horizontal
*
* A horizontal nav with overflow scrolling on small screens.
*/
.Nav--horizontal {
    text-align: center;
    &::before {
        text-align: left;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0) 100%
        );
    }
    &::after {
        text-align: right;
        background: linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 70%,
            rgba(255, 255, 255, 1) 100%
        );
    }
    &::before,
    &::after {
        display: none;
        content: "";
    }
    ul {
        @include inline-list;
        display: flex;
        overflow-x: visible;
        justify-content: flex-start;
        white-space: nowrap;
    }
    li > a,
    li > button {
        @include font-size-small;
        @include font-weight-semibold;
        display: inline-block;
        padding: Space(500) 0;
        color: get-color(neutral, 700);
        &:hover {
            color: get-color(neutral, 800);
            text-decoration: none;
        }
        &.is-active {
            color: theme-color(link);
        }
        &.is-active:hover {
            color: theme-color(main, dark);
        }
    }
}
.Nav--underline {
    @include navigation-menu(
        $link-color: theme-color(text),
        $link-margin: 0,
        $link-padding: Space(400)
    );
    display: block;
    > ul {
        > li > a,
        > li > button {
            &:focus {
                text-decoration: none;
            }
            &::after {
                height: Space(200);
            }
        }
    }
}
@media screen and (max-width: 959px) {
    .Nav--horizontal {
        -webkit-overflow-scrolling: touch;
        overflow-x: scroll;
        overflow-y: hidden;
        ul {
            display: inline-block;
        }
        &::before,
        &::after {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            display: block;
            width: 100%;
            height: 100%;
            padding-right: 10px;
            padding-left: 10px;
            line-height: 4rem;
            transition: opacity $transition-time-default $transition-in-default;
            pointer-events: none;
        }
    }
    .Nav--horizontal.is-start {
        &::before {
            transform: translateX(-20%);
        }
    }
    .Nav--horizontal.is-end {
        &::after {
            transform: translateX(20%);
        }
    }
}

/**
* Nav--vertical
*/
.Nav--vertical {
    > ul {
        > li a,
        > li button,
        > li > .button._link,
        ul > li > a,
        ul > li > button {
            @include Nav-item--vertical;
        }
        > li > a.is-active,
        > li > button.is-active {
            background: theme-color(background);
        }
        ul > li > a,
        ul > li > button {
            padding: Space(300) Space(600);
            &.is-active {
                background: none;
            }
        }
        ul {
            display: none;
            > li:first-of-type {
                margin-top: Space(300);
            }
            > li:last-of-type {
                margin-bottom: Space(300);
            }
        }
    }
}
.Nav--light {
    li a:not(.is-active):not(:hover):not(:focus),
    li button:not(.is-active):not(:hover):not(:focus),
    li > .button._link:not(:hover):not(:focus),
    ul > li > a:not(.is-active):not(:hover):not(:focus),
    ul > li > button:not(.is-active):not(:hover):not(:focus) {
        color: get-color(neutral, 700);
    }
}
.Nav--tight {
    li a,
    li button,
    li > .button._link,
    ul > li > a,
    ul > li > button {
        @include font-size-small;
        padding-right: 0;
        padding-left: 0;
        line-height: 1;
    }
    li + li {
        margin-top: 0;
    }
}
.Nav--horizontalTight {
    ul {
        overflow: auto;
        justify-content: space-between;
        > li + li {
            margin-left: 0;
        }
    }
}
@media #{$desktop-media} {
    .Nav--vertical {
        &:not(.Nav--removeTopMargin) ul {
            margin-top: Space(600);
        }
    }
}
  • URL: /components/raw/nav/Nav.scss
  • Filesystem Path: components/molecules/Nav/Nav.scss
  • Size: 4.3 KB
  • Content: 
    import each from '../../../modules/util/each';
import ready from '../../../modules/util/ready';

const navScroll = nav => {
    return () => {
        const scrollLeft = nav.scrollLeft;
        const innerWidth = nav.querySelector('ul').clientWidth - nav.clientWidth;

        if (scrollLeft < 10) {
            nav.classList.add('is-start');
        } else if (innerWidth - scrollLeft <= 10) {
            nav.classList.add('is-end');
        } else {
            nav.classList.remove('is-start', 'is-end');
        }
    };
};

ready(() => {
    each(document.querySelectorAll('.Nav'), nav => {
        const activeItem =
            nav.querySelector('.is-active') || nav.querySelector(`a[href*="${window.location.pathname}"]`);
        if (activeItem) {
            activeItem.classList.add('is-active');
            activeItem.setAttribute('aria-current', 'page');
        }

        if (nav.classList.contains('Nav--horizontal')) {
            nav.parentNode.style.overflow = 'hidden';
            nav.parentNode.style.position = 'relative';
            // Use the maths to center the active item in the nav
            if (activeItem) nav.scrollLeft = activeItem.offsetLeft - (nav.clientWidth - activeItem.clientWidth) / 2;
            navScroll(nav)();
            nav.addEventListener('scroll', navScroll(nav));
        }
    });
});
  • URL: /components/raw/nav/index.js
  • Filesystem Path: components/molecules/Nav/index.js
  • Size: 1.3 KB

Nav

Nav is a standard implementation of the HTML5 nav element containing an unordered list element with list items containing anchors.

Best Practices

  • Always use a Nav-item as a child.
  • You probably want to place the nav within a row and column in the grid system, but it should work outside of it.

Accessibility

Nav is compliant with the WCAG 2.0 standards for navigation menus.

Browser Support

Nav works in all browsers we currently support.

More Info

  • When you include the Nav JS in your bundle, it will add an active class to an anchor to the current page, if there is one in the nav.
  • Horizontal navs will also scroll to the anchor to the current page.