A top bar navigation pattern.
npm install top-bar.css
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/top-bar.css">
...
</head>
<body>
...
<nav class="top-bar">
<a href="#" class="top-bar-title">site title</a>
<a href="#" class="top-bar-link">some nav link</a>
<a href="#" class="top-bar-link">another one</a>
<a href="#" class="top-bar-link current-page">current page</a>
<div class="top-bar-right">
<a href="#" class="top-bar-link">this one's on the right</a>
</div>
</nav>
...
</body>
</html>Everything is scoped to .top-bar.
Compatible with css-via-npm workflows.
You can also use this as a Sass library.
@import '../node_modules/top-bar.css/source/top-bar';You can set the font family like so:
$top-bar-family: 'Comic Sans';
@import '../node_modules/top-bar.css/source/top-bar';