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

TR


                  <nav class="navbar navbar-expand-lg navbar-light">
                    <div class="container-fluid">
                      <div class="nav" id="appSelect">
                        <div class="nav-item dropdown">
                          <a class="nav-link pl-2 pr-2 pt-1" data-toggle="dropdown" href="#" role="button"
                            aria-haspopup="true" aria-expanded="false">
                            <div class="media">
                              <div class="align-self-start mr-3 img ttLogo-tm ttLogo rounded"></div>

                              <div class="media-body">
                                <p class="appName d-none d-md-block">Manager</p>
                                <p class="brandBlurb d-none d-md-block">Blurb</p>
                                <span class="d-md-none headTxtSm">Talent<br>Manager</span>
                              </div>
                              <div class="appSelectChevron">
                                <span class="fal fa-chevron-down"></span>
                              </div>
                            </div>
                          </a>

                          <div class="dropdown-menu">
                            <a class="dropdown-item w-100 mt-1" href="#">
                              <div class="media">
                                <img src="/v2/images/talentech-logo.jpg" class="align-self-start mr-3 img ttLogo"
                                  alt="...">
                                <div class="media-body">
                                  <p class="appName mt-0">App 1</p>
                                  <p class="brandBlurb">Blurb</p>
                                </div>
                              </div>
                            </a>
                            <div class="dropdown-item w-100 section-title">
                              <p>Section title</p>
                            </div>
                            <a class="dropdown-item w-100 mt-1" href="#">
                              <div class="media">
                                <img src="/v2/images/talmundo-logo.jpg" class="align-self-start mr-3 img ttLogo"
                                  alt="...">
                                <div class="media-body">
                                  <p class="appName mt-0">App 2</p>
                                  <p class="brandBlurb">Blurb</p>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>

                      <ul class="nav ml-auto">
                        <li class="nav-item d-flex align-middle">
                          <a class="navIcon d-none d-sm-block mt-2 mb-1" href="#" data-toggle="collapse"
                            data-target="#collapseSearch" aria-expanded="false" aria-controls="collapseSearch">
                            <span class="navbar-text pl-3 pr-3">
                              <span class="fas fa-search"></span>
                            </span>
                          </a>
                        </li>
                        <li class="nav-item d-flex align-middle" data-toggle="tooltip" data-placement="bottom"
                          title="News">
                          <a class="navIcon d-none d-sm-block mt-2 mb-1" href="#">
                            <span class="navbar-text pl-3 pr-3">
                              <span class="fas fa-sparkles"></span>
                              <!--<span class="badge badge-pill">&nbsp;</span>-->
                            </span>
                          </a>
                        </li>
                        <li class="nav-item  d-flex align-middle" data-toggle="tooltip" data-placement="bottom"
                          title="Notifications">
                          <a class="navIcon d-none d-sm-block mt-2 mb-1" href="#">
                            <span class="navbar-text pl-3 pr-3">
                              <span class="fas fa-bell"></span>
                              <span class="badge badge-pill">&nbsp;</span>
                            </span>
                          </a>
                        </li>
                        <li class="d-sm-none">
                          <button type="button" class="btn btn-tt btn-light btn-tt-light" data-toggle="modal"
                            data-target="#navModal">
                            <span class="fas fa-bars"></span>
                          </button>
                        </li>
                        <li class="nav-item active">
                          <div class="navbar-text dropdown userB text-center">
                            <a aria-expanded="false" aria-haspopup="true" class="nav-link mt-1" data-toggle="dropdown"
                              href="#" id="navbarDropdownA" role="button">
                              <img alt="avatar" class="rounded-circle img-fluid userBimg"
                                src="https://thispersondoesnotexist.com/image">
                              <span class="userName">
                                <span class="firstName">Firstname</span>
                                <span class="fal fa-chevron-down"></span>
                              </span>
                            </a>
                            <div aria-labelledby="navbarDropdownA"
                              class="dropdown-menu dropdown-menu-right dropdown-menu-sm-right w-100">
                              <div class="userDD text-center">
                                <img alt="avatar" class="rounded-circle img-fluid"
                                  src="https://thispersondoesnotexist.com/image">
                                <h2 class="pt-4">Firstname Lastname</h2>
                                <h3>janine.fredrica.brockelwink.stang@acme-industries.com</h3>
                                <hr>
                                <p>
                                  <a class="dropdown-item text-left pt-3 pb-3" href="#">
                                    <span class="fal fa-cog"></span>
                                    <span class="pl-2">My account</span>
                                  </a>
                                </p>
                                <p>
                                  <a class="dropdown-item text-left pt-3 pb-3 pt-3" href="#">
                                    <span class="fal fa-sign-out"></span>
                                    <span class="pl-2">Sign out</span>
                                  </a>
                                </p>
                                <hr>
                                <ul class="list-group list-group-horizontal d-flex justify-content-center mb-1 mt-2">
                                  <li class="list-group-item"><a href="#">Privacy policy</a></li>
                                  <li class="list-group-item">&bull;</li>
                                  <li class="list-group-item"><a href="#">Terms of service</a></li>
                                </ul>
                              </div><!--userDD-->
                            </div><!--navbardropdownA-->
                          </div><!--userB-->
                        </li>
                      </ul>

                      <button type="button" class="btn userBtn d-inline-block d-md-none" data-toggle="modal"
                        data-target="#exampleModal">
                        <img alt="avatar" class="rounded-circle img-fluid userBimg" src="/v2/images/user2.png">
                      </button>
                  </nav>


                

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>

                

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>
                

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">&laquo;</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">&raquo;</span>
                          <span class="sr-only">Next</span>
                        </a>
                      </li>
                    </ul>
                  </nav>
                

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>
                

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>
                

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>
                

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