<nav id="" class="Nav Nav--horizontal Nav--underline">
<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--horizontal Nav--underline"
}
.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);
}
}
}
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));
}
});
});
Nav is a standard implementation of the HTML5 nav element containing an unordered list element with list items containing anchors.
Nav-item as a child.Nav is compliant with the WCAG 2.0 standards for navigation menus.
Nav works in all browsers we currently support.