The top navigation is available in 3 colors:
- Branded version - Blue version
- Inverted version - Graphite version
- Secondary version - White version
There are 3 design options for the top navigation: blue version (the default one - .navbar-branded), graphite (.navbar-inverted) and the white version (.navbar-secondary).
Branded version
The branded version is using the secondary branded color palette, for the first level background color.
<!-- Complex example (three levels, product selection dropdown, user details dropdown) -->
<header class="navbar navbar-branded" id="vudNavTopMain" role="navigation">
<div class="navbar-header">
<div class="navbar-brand dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-expanded="false" aria-label="Visma Project Name">
Visma Project Name
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="listbox">
<li>
<a class="app-item" href="#" role="option" aria-label="Autoinvoice">
<img src="..." alt="..." class="img-inline">
Autoinvoice
</a>
</li>
...
</ul>
</div>
</div>
<nav class="collapse navbar-collapse" aria-label="Menu">
<ul class="nav navbar-nav nav-tabs first-level" role="menubar">
<li>
<a class="nav-item fl-menu-item" href="#" role="menuitem" aria-selected="false">Item one</a>
</li>
<li class="second-level-children active">
<a class="nav-item fl-menu-item has-children" href="#" role="menuitem" aria-selected="true">Item two</a>
<ul class="second-level" role="menu">
<li class="dropdown">
<a class="nav-item sl-menu-item dropdown-toggle" href="#" role="button" aria-expanded="false">Item one</a>
<ul class="third-level dropdown-menu" role="menu">
<li>
<a class="nav-item tl-menu-item" href="#" role="menuitem">Item one</a>
</li>
...
</ul>
</li>
<li>
<a class="nav-item sl-menu-item" href="#">Item two</a>
</li>
...
</ul>
</li>
<li class="second-level-children">
<a class="nav-item fl-menu-item" href="#" role="menuitem">Item three</a>
</li>
<li class="menudrop dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false">
<span class="hidden">Menu</span>
<i class="icon-align-justify"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li class="second-level-children">
<a class="nav-item fl-menu-item" href="#" role="menuitem">Item four</a>
</li>
<li class="second-level-children">
<a class="nav-item fl-menu-item" href="#" role="menuitem">Item five</a>
</li>
<li class="second-level-children">
<a class="nav-item fl-menu-item" href="#" role="menuitem">Item six</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav nav-tabs navbar-right first-level context-selector">
<li class="icon attention">
<a role="button" href="#" aria-label="Alert">
<span class="vismaicon vismaicon-menu vismaicon-alert" aria-hidden="true"></span>
</a>
</li>
...
<li class="dropdown user-dropdown pristine icon">
<a role="dropdown-toggle button-context" href="#" data-toggle="dropdown" role="button">
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="christian.mcbale.jr@somemail.com">
<div class="user-image">
<img src="..." alt="...">
</div>
<div class="user-text">
<span>Christian Mcbale Jr.</span>
<span class="text-disabled">christian.mcbale.jr@mail.com</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">
<a href="#">Help</a>
</li>
<li role="menuitem">
<a href="#">Report a problem</a>
</li>
<li class="divider"></li>
<li class="context-footer company-selection-footer clear" role="menuitem">
<a href="#" class="log-out-link vismaicon-sm vismaicon-dynamic vismaicon vismaicon-logout">Log out</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
Inverted version
For the graphite version use the .navbar-primary class to the <header> tag.
<header class="navbar navbar-inverted" id="vudNavTopMain" role="navigation">
<div class="navbar-header">
...
</div>
<nav class="collapse navbar-collapse" aria-label="Menu">
...
</nav>
</header>
Secondary version
To have the white version simply add .navbar-secondary class to the <header> tag.
<header class="navbar navbar-secondary" id="vudNavTopMain" role="navigation">
<div class="navbar-header">
...
</div>
<nav class="collapse navbar-collapse" aria-label="Menu">
...
</nav>
</header>
Navigation with search box
<header class="navbar navbar-default" id="nc4navTopMain" role="navigation">
<div class="navbar-header"> ... </div>
<nav class="collapse navbar-collapse" aria-label="Menu">
<ul class="nav navbar-nav navbar-right nav-tabs first-level" role="menubar">
...
<li class="navbar-form" role="search">
<form class="form-group search-group">
<label for="form_control_ex1" class="sr-only">Search</label>
<input id="form_control_ex1" class="form-control" type="search" placeholder="Search..." aria-label="searchBlock">
<span class="search-icon">Search icon</span>
<span class="clear-search">Clear</span>
</form>
</li>
...
</ul>
</nav>
</header>