Navigation
Top (application and user) navbar
Top application bar with appselector, icon bar, search expand, user account dropdown and modals. Condtional on the little appselector arrow. If no dropdown to other apps, no arrow/chevron.
Example
TM
Page header w breadcrumbs, link & dropdown button
Breadcrumbs and action buttons as needed, this example only. Make sure all buttons are inside button group.
Example
<div class="t-header">
<div class="t-header-inner">
<div class="col-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Breadcrumb Link</a></li>
<li class="breadcrumb-item"><a href="#">Page header</a></li>
<li class="breadcrumb-item"><a href="#">Breadcrumb 3</a></li>
<li class="breadcrumb-item active" aria-current="page">Parent</li>
</ol>
</nav>
</div>
<div class="col-12 d-flex flex-wrap">
<div class="page-header">
<h1>{{Page header h1}}</h1>
</div>
<div class="ml-auto">
<div class="btn-group btn-group-sm justify-content-end" role="group"
aria-label="Button group">
<button class="btn btn-sq btn-sq-success" type="button">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<div class="dropdown dropleft">
<button class="btn btn-sq" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">New project</a>
<a class="dropdown-item" href="#">Copy project</a>
</div>
</div>
</div>
</div>
</div>
<div class="col p-2 border-top">
<a href="#" class="m-2"><span class="far fa-chevron-left pr-1"></span>link</a>
</div>
</div>
</div>
Support admin navigation
This is the navbar for Support administration and are internal use only. Do not remove what might seem as redundant icons. This is for responsiveness.
Example
<nav class="adminBar d-flex justify-content-between">
<span class="d-block d-sm-none"><span class="fal fa-user-crown"></span></span>
<span class="d-none d-sm-block"><span class="fal fa-user-crown"></span>Support admin</span>
<span class="trunkateB">{Customer name}</span>
<span class="d-block d-sm-none"><span class="fal fa-retweet"></span></span>
<a href="/" class="d-none d-sm-block"><span class="fal fa-retweet"></span> Switch user</a>
</nav>
Pagination
For 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
.
Example
<nav aria-label="Pagination">
<ul class="pagination mb-0">
<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>
Breadcrumbs
Where am I and how did I get here? Oh, I see. Use breadcrumbs when pages have hierarchical relationships.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta
Example
<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>
Tabs
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
…
Example
<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>
Link list
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.
Example
<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>
Footer
The html includes both .talentech-footer and .whitelable-footer with the one not needed set to display: none in respective styleguides
Example
<footer class="col p-0">
<div class="talentech-footer d-flex justify-content-center">
<a href=""><img src="/v2/images/powered-by-talentech.png"></img></a>
</div>
<div class="whitelable-footer d-flex justify-content-between align-items-end">
<a href="#"><img class="logo-left" src="/v2/images/visma-datalon.png"></img></a>
<a href="#"><img class="logo-right" src="/v2/images/powered-by-talentech.png"></img></a>
</div>
</footer>
v1.0.786-rev-3843d50