Breaking Changes: This page contains breaking changes. Please read the change log carefully.
Navbar
Default navbar
The top menu is the user's primary navigation tool and is placed at the top of the page. The top menu should remain on top when scrolling the page, so that users can see where they are at all times. Exceptions can be made for smaller resolutions or if more screen area is needed, especially if there are also some other parts of the screen needing to be fixed, such as a bottom toolbar. Read more about the top menu in the UX Guidelines.
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Use when
- The top menu is a foundation block, meaning it is mandatory to use since it helps manifest the Visma brand.
- It is used to navigate between different services, choose different menu options inside the service, provide help and access to settings as well as a possibility of changing company context.
- If the information architecture needs additional levels, the top menu can be used in combination with a secondary menu or even a vertical menu.
For this component you need JavaScript! We recommend to create your own scripts following the structure from the examples below.
You can also use the scripts we use for our examples. For this case - navigation - you need to use nc4navigation.js and app.js.
Design
Options
Compared to NC3, the main navigation should always be fixed now, so it has by default position: fixed.
The top navigation is available in 3 colors:
Blue navigation
Demo page! Here you can find a demo page where you can test the main navigation, together with a side navigation and a text panel.
Complex example (three levels, product selection dropdown, user details dropdown):
<header class="navbar navbar-default demo-with-icons" id="vudNavDefault" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavDefaultCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavDefaultFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a href="#!" class="nav-item fl-menu-item has-children" id="customers" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two
<span class="caret"></span>
</a>
<ul class="second-level" id="slm-customers" aria-label="Item two" role="menu">
<li role="none" class="dropdown">
<a href="#!" tabindex="0" class="nav-item sl-menu-item dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
Item one<span class="caret"></span>
</a>
<ul class="third-level dropdown-menu" role="menu" aria-label="Item one">
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item one</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item four</a>
</li>
</ul>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item sl-menu-item" >Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item four</a>
</li>
<li role="none" class="disabled">
<a href="#!" class="nav-item sl-menu-item" >Item five</a>
</li>
</ul>
</li>
<li>
<a href="#!" class="nav-item fl-menu-item" id="otherPage" role="menuitem" aria-selected="false">Item three</a>
</li>
<li class="menudrop dropdown hidden">
<a class="dropdown-toggle" id="vudNavDefaultMenuDropTrigger" href="#!" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="hidden">Menu</span>
<i class="icon-align-justify"></i>
</a>
<ul class="dropdown-menu" id="vudNavDefaultMenuDropContent" role="menu" aria-expanded="false" aria-hidden="true">
<li class="dropdown navbar-brand hidden" id="vudNavDefaultBrand"></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label class="sr-only" for="form_control_ex1">Search</label>
<input id="form_control_ex1" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-alert" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="Support" role="button" aria-label="Support">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
</a>
</li>
<li class="dropdown shopping-cart">
<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
27.250,00 SEK
<span class="caret"></span>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true">
<li role="menuitem">
<a href="#!" class="">Shopping cart items</a>
</li>
</ul>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="help">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-help"></span>
</a>
</li>
<li class="dropdown icon-dropdown icon hidden">
<a class="dropdown-toggle" id="vudNavDefaultIconsMenuDropContent" role="button" href="#!" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="Open contextual overflow menu with more action options">
<span class="vismaicon vismaicon-dynamic vismaicon-tools" aria-hidden="true"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-expanded="false" aria-hidden="true" aria-labelledby="vudNavDefaultIconsMenuDropContent"></ul>
</li>
<li class="dropdown user-dropdown">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Information area">
Christian M.
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-user-placeholder"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>User details dropdown:
<header class="navbar navbar-default" id="vudNavDefaultDetailsDropdown" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavDefaultDetailsDropdownCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavDefaultDetailsDropdownFlMenu" role="menubar" aria-label="Menu"> </ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="dropdown user-dropdown">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" aria-expanded="true" role="button" aria-label="Information area">
Christian M.
<span class="vismaicon vismaicon-menu vismaicon-user"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>More simple example (one level):
<header class="navbar navbar-default demo-with-icons" id="vudNavDefaultSimple" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavDefaultSimpleCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavDefaultSimpleFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage-1" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="active">
<a href="#!" class="nav-item fl-menu-item" id="customers-1" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two</a>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-alert" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" title="Settings" role="button" aria-label="Settings">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-settings" aria-hidden="true"></span>
</a>
</li>
</ul>
</nav>
</header>Brand text
Replace the navbar brand with your own image. Check the example below.
<header class="navbar navbar-default" id="vudNavDefaultBrandSimple" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
</header>With icons
If you need an item to have an icon insted of text in the main menu just add .icon on the li element that you want, also add a span with the right class to display the icons that you need.
<header class="navbar navbar-default demo-with-icons" id="vudNavDefaultIcons" role="navigation">
<nav class="collapse navbar-collapse" id="vudNavDefaultIconsCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="location" role="button" aria-label="location">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-location" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="Support" role="button" aria-label="Support">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="info">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-info"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="help">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-help"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="favourites">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-favourites"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="docs">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-docs"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Calendar">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-calendar"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Search">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-search"></span>
</a>
</li>
</ul>
</nav>
</header>
Badge on items You can add a badge on some of the item (icon items) from your menu. You can either add a
<span class="badge">+99</span> or add .attention class on the li tag.
<header class="navbar navbar-default demo-with-icons" id="vudNavDefaultMoreIcons" role="navigation">
<nav class="collapse navbar-collapse" id="vudNavDefaultMoreIconsCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-alert" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="User">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-user"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Shopping cart">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
<span class="badge">5</span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Home">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-home"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Tools">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-tools"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="User settings">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-user-settings"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Reminder">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-reminder"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Phone">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-phone"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Logout">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-logout"></span>
</a>
</li>
</ul>
</nav>
</header>With search box
<header class="navbar navbar-default demo-with-icons" id="nc4navTopMain" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level">
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label class="sr-only" for="form_control_ex1">Search</label>
<input id="form_control_ex1" class="form-control" aria-label="searchBlock" type="text" placeholder="Search...">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
</ul>
</nav>
</header>With shopping cart
<header class="navbar navbar-default demo-with-icons" id="nc4navTopMain" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="nc4navCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs navbar-right first-level">
<li class="icon dropdown shopping-cart">
<a role="button" class="dropdown-toggle" href="#!" aria-label="Shopping cart" data-toggle="dropdown" aria-expanded="false">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
27.250,00 SEK
<span class="caret"></span>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu" role="menu">
<li role="menuitem">
<a href="#!" class="">Shopping cart items</a>
</li>
</ul>
</li>
<li class="icon attention">
<a href="#!" title="email" role="button" aria-label="email">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-email" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" title="chat" role="button" aria-label="chat">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
<span class="badge">2</span>
</a>
</li>
</ul>
</nav>
</header>Color options
There are 3 design options for the top navigation: blue version (the default one - .navbar-default), graphite (.navbar-primary) and the white version (.navbar-secondary). To have the white version simply change the class from the <header> tag from .navbar-default to .navbar-secondary and for the grahite version use the .navbar-primary class.
Graphite navigation
Demo page! Here you can find a demo page where you can test the main navigation, together with a side navigation and a text panel.
<header class="navbar navbar-primary demo-with-icons" id="vudNavPrimary" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavPrimaryCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavPrimaryFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage-2" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a href="#!" class="nav-item fl-menu-item has-children" id="customers-2" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two</a>
<ul class="second-level" id="slm-customers-2" aria-label="Item two" role="menu">
<li role="none" class="dropdown">
<a href="#!" tabindex="0" class="nav-item sl-menu-item dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
Item one<span class="caret"></span>
</a>
<ul class="third-level dropdown-menu" role="menu" aria-label="Item one">
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item one</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item five</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item six</a>
</li>
</ul>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item sl-menu-item" >Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item five</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-alert" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="location" role="button" aria-label="location">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-location" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="Support" role="button" aria-label="Support">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="favourites">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-favourites"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Shopping cart">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
<span class="badge">5</span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="help">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-help"></span>
</a>
</li>
<li class="dropdown user-dropdown pristine">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Information area">
Christian M.
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-user-placeholder"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>White navigation
Demo page! Here you can find a demo page where you can test the main navigation, together with a side navigation and a text panel.
<header class="navbar navbar-secondary demo-with-icons" id="vudNavPrimaryIcons" role="navigation">
<div class="navbar-header">
<div class="navbar-brand">
<a tabindex="0" href="#!" id="vudNavDefaultApps" title="Spiris" aria-label="Spiris">
<img src="../assets/img/spiris/spiris-logo.svg" title="Spiris" alt="Spiris logo">
</a>
</div>
</div>
<nav class="collapse navbar-collapse" id="vudNavPrimaryIconsCollapseMain" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" id="vudNavPrimaryIconsFlMenu" role="menubar" aria-label="Menu">
<li>
<a href="#!" class="nav-item fl-menu-item" id="startPage-3" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a href="#!" class="nav-item fl-menu-item has-children" id="customers-3" role="menuitem" aria-label="Item two" aria-haspopup="true" aria-selected="true" aria-expanded="false">Item two</a>
<ul class="second-level" id="slm-customers-3" aria-label="Item two" role="menu">
<li role="none" class="dropdown">
<a href="#!" tabindex="0" class="nav-item sl-menu-item dropdown-toggle" role="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
Item one<span class="caret"></span>
</a>
<ul class="third-level dropdown-menu" role="menu" aria-label="Item one">
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item one</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item five</a>
</li>
<li role="none">
<a href="#!" class="nav-item tl-menu-item" role="menuitem">Item six</a>
</li>
</ul>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item two</a>
</li>
<li role="none" class="active">
<a href="#!" class="nav-item sl-menu-item" >Item three</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item four</a>
</li>
<li role="none">
<a href="#!" class="nav-item sl-menu-item" >Item five</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a href="#!" title="Alert" role="button" aria-label="Alert">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-alert" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="location" role="button" aria-label="location">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-location" aria-hidden="true"></span>
</a>
</li>
<li class="icon attention">
<a href="#!" title="Support" role="button" aria-label="Support">
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-chat" aria-hidden="true"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="favourites">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-favourites"></span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="Shopping cart">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart"></span>
<span class="badge">5</span>
</a>
</li>
<li class="icon">
<a href="#!" role="button" aria-label="help">
<span aria-hidden="true" class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-help"></span>
</a>
</li>
<li class="dropdown user-dropdown pristine">
<a href="#!" tabindex="0" class="dropdown-toggle button-context" title="(Alt+K)" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Information area">
Christian M.
<span class="vismaicon vismaicon-dynamic vismaicon-menu vismaicon-user-placeholder"></span>
<small class="selectedContext">Cool Company name AB</small>
<span class="caret"></span>
</a>
<ul class="dropdown-menu company-selection" role="menu">
<li class="user-details-area clear" role="menuitem">
<div title="[email protected]">
<div class="user-image">
<img src="../assets/docs/img/avatar.png" alt="User avatar image">
</div>
<div class="user-text">
<span>Christian McBale Jr.</span>
<span class="text-disabled">[email protected]</span>
</div>
</div>
</li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">My profile</a>
</li>
<li role="menuitem">
<a href="#!">Language</a>
</li>
<li role="menuitem">
<a href="#!" tabindex="-1" aria-disabled="true">My location</a>
</li>
<li class="divider"></li>
<li role="menuitem">
<p>Visma Recruit <br>Copyright 2021 Visma.</p>
</li>
<li role="menuitem">
<p>Visma Recruit is made possible by Visma and other <a href="#!">open source and third party licenses</a>.</p>
</li>
<li role="menuitem"><p><a href="#!">Terms of Service</a></p></li>
<li class="divider"></li>
<li role="menuitem">
<a href="#!">Help</a>
</li>
<li role="menuitem">
<a href="#!">Report a problem</a>
</li>
<li class="divider divider-strong"></li>
<li role="menuitem">
<button class="btn btn-lg" type="button">
<span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-logout"></span>
Sign out
</button>
</li>
<li class="mt-16 text-center" role="menuitem">
<span>Latest login: 2022-09-09 15:33</span>
</li>
</ul>
</li>
</ul>
</nav>
</header>