UI Pattern: "Horizontal Navigation"
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
<link rel=stylesheet href=//erikdavidjung.com/bootstrap.css>
<nav role="navigation">
<ul>
<li><a href="#">This is a link</a></li>
<li class=s-current><a>Active Button</a></li>
<li><a href="#">Lorem link</a></li>
<li><a href="#">Dolor link two</a></li>
<li><a href="#">Here is a link</a></li>
</ul>
</nav>
/**
* UI Pattern: "Horizontal Navigation"
*/
nav[role=navigation] {
cursor: default;
}
nav[role=navigation] ul {
list-style: none;
overflow: auto;
}
nav[role=navigation] li {
float: left;
}
nav[role=navigation] li:not(:last-child) {
margin-right: 1rem;
}
nav[role=navigation] a {
display: block;
padding: .5rem 1rem;
}
nav[role=navigation] .s-current a {
font-weight: bold;
}