<div class="horizontal-nav">
<h3 class="horizontal-nav__title">Horizontal Navigation</h3>
<ul class="horizontal-nav__list">
<li class="horizontal-nav__list__item"><a href="#">A</a></li>
<li class="horizontal-nav__list__item"><a href="#">B</a></li>
<li class="horizontal-nav__list__item"><a href="#">C</a></li>
<li class="horizontal-nav__list__item"><a href="#">D</a></li>
<li class="horizontal-nav__list__item"><a href="#">E</a></li>
<li class="horizontal-nav__list__item"><a href="#">F</a></li>
<li class="horizontal-nav__list__item"><a href="#">G</a></li>
<li class="horizontal-nav__list__item"><a href="#">H</a></li>
<li class="horizontal-nav__list__item"><a href="#">I</a></li>
<li class="horizontal-nav__list__item"><a href="#">J</a></li>
<li class="horizontal-nav__list__item"><a href="#">K</a></li>
<li class="horizontal-nav__list__item"><a href="#">L</a></li>
<li class="horizontal-nav__list__item"><a href="#">M</a></li>
<li class="horizontal-nav__list__item"><a href="#">N</a></li>
<li class="horizontal-nav__list__item"><a href="#">O</a></li>
</ul>
</div>
.horizontal-nav {
@include rem(margin-top, $grid-typo-spacing-m + $grid-typo-spacing-s);
@include stickOutBoxInContent;
}
.horizontal-nav__title {
@include headingWithShortRuleOnTop;
}
.horizontal-nav__list {
@include inline-list;
}
.horizontal-nav__list__item.horizontal-nav__list__item {
@include rem(margin, $grid-typo-spacing-xxxs 0);
border-right: solid 1px $ruleAndSeparatorColour;
display: inline-block;
line-height: 1;
list-style-type: none;
padding: 0 0.5ch 0 0;
&:before {
display: none;
}
&:last-of-type {
border-right: 0;
&:after {
content: none;
}
}
& + & {
padding-left: 0.5ch;
}
}
A horizontal list of navigation links.
{
"title": "Horizontal Navigation",
"items": [
{
"title": "A",
"url": "#"
},
{
"title": "B",
"url": "#"
},
{
"title": "C",
"url": "#"
},
{
"title": "D",
"url": "#"
},
{
"title": "E",
"url": "#"
},
{
"title": "F",
"url": "#"
},
{
"title": "G",
"url": "#"
},
{
"title": "H",
"url": "#"
},
{
"title": "I",
"url": "#"
},
{
"title": "J",
"url": "#"
},
{
"title": "K",
"url": "#"
},
{
"title": "L",
"url": "#"
},
{
"title": "M",
"url": "#"
},
{
"title": "N",
"url": "#"
},
{
"title": "O",
"url": "#"
}
]
}