This is the navigation that goes where the {{login status and user navigation goes here}} placeholder is in the main page template.
Use Font Awesome for the icons. If you are in doubt about which icons to use, consult with a front-end person.
<li class="list-inline-item notification-list">
<a class="nav-link" href="#" role="button">
<i class="fa fa-bell-o noti-icon"></i>
<span class="noti-icon-badge"></span>
</a>
</li>
<li class="list-inline-item notification-list">
<a class="nav-link" href="#" role="button">
<i class="fa fa-envelope-o noti-icon"></i>
<span class="noti-icon-badge"></span>
</a>
</li>
<li class="list-inline-item notification-list">
<a class="nav-link nav-user" href="#" role="button">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="user" class="rounded-circle">
</a>
</li>
This is the navigation that goes where the {{application specific navigation goes here}} placeholder is in the main page template.
Use our Icons for the icons. In this menu, we use Fontawesome Duotone (prefix fad).
<ul class="navigation-menu">
<li><a href="/">
<i class="fa fa-home" aria-hidden="true"></i>
<span> Intro </span>
</a></li>
<li class="has-submenu">
<a href="">
<i class="fa fa-circle" aria-hidden="true"></i>
<span> Base styles </span>
</a>
<ul class="submenu">
<li><a href="">Typography</a></li>
<li><a href="">Buttons and links</a></li>
<li><a href="">Tables</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="">
<i class="fa fa-dot-circle-o" aria-hidden="true"></i>
<span> Components </span>
</a>
<ul class="submenu">
<li><a href="">Dropdowns</a></li>
<li><a href="">Tooltips</a></li>
<li><a href="">Alerts</a></li>
<li><a href="">Modals</a></li>
</ul>
</li>
</ul>
This is the navbar for Support admins. Place this immediately after the <header id="topnav"> as described on the Intro page.
Do not remove what might seem as redundant icons. This is for responsiveness.
<nav class="adminBar d-flex justify-content-between">
<span class="d-block d-sm-none"><span class="fad fa-user-crown"></span></span>
<span class="d-none d-sm-block"><span class="fad fa-user-crown"></span>Support admin</span>
<span class="trunkateB">{Customer name}</span>
<span class="d-block d-sm-none"><span class="fad fa-exchange-alt"></span></span>
<a href="/" class="d-none d-sm-block"><span class="fad fa-exchange-alt"></span> Switch user</a>
</nav>
Use this for when you have several separate pages of related content. It’s important that this navigation component is consistent across all pages, so instead of hiding the “previous” link on the first page and the “next” link on the last page, append .disabled to the .page-item as per the example. The current active page should have the class .active.
For the “previous” and “next” links, make sure you add the screen-reader only (.sr-only) text, as the symbols might not be clear to screen-reader users.
The pagination should be wrapped in a <nav> element with a descriptive aria-label.
<nav aria-label="Pagination">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
Where am I and how did I get here? Oh, I see.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Candidate list</a></li>
<li class="breadcrumb-item active" aria-current="page">John Andersen</li>
</ol>
</nav>
Use tabs sparingly and thoughtfully. It is not a normal type of navigation, but meant exclusively for when paged content fits together, like a multi-page form.
Indicate the current active page with .active on the tab link, and disabled with .disabled…
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<div class="card">
<div class="card-body">
None of the above tabs will actually do anything.
</div>
</div>
When you need a separate list of links, in a sidebar or elsewhere, use this link list. The markup is important, and the list will look weird if you don't adhere to it exactly.
A link item can marked as .disabled and .active by adding the classes directly on the link.
Use Badges to flavor the link items with additional information.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Active link item
</a>
<a href="#" class="list-group-item list-group-item-action">
Dapibus ac facilisis in
<span class="badge badge-primary d-block float-right">64</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
Morbi leo risus
</a>
<a href="#" class="list-group-item list-group-item-action">
Porta ac consectetur ac
<span class="badge badge-success d-block float-right">Completed</span>
</a>
<a href="#" class="list-group-item list-group-item-action disabled">
Disabled link item
</a>
</div>