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): 

					



<!-- Complex example (three levels, product selection dropdown, user details dropdown) -->
<header class="navbar navbar-default" id="nc4navTopMain" 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="active">
         <a class="nav-item fl-menu-item has-children" href="#" role="menuitem" aria-haspopup="true" aria-selected="true" aria-expanded="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-haspopup="true" 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="disabled">
         <a class="nav-item fl-menu-item" href="#" role="menuitem" tabindex="-1" aria-disabled="true">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>
               <a class="nav-item fl-menu-item" href="#" role="menuitem">Item four</a>
            </li>
            <li>
               <a class="nav-item fl-menu-item" href="#" role="menuitem">Item five</a>
            </li>
            <li>
               <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">
      <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" 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">
                     <b>Christian Mcbale Jr.</b>
                     <span>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 class="disabled" role="menuitem">
               <a href="#" tabindex="-1" aria-disabled="true">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 role="menuitem">
               <button class="btn btn-lg">
			       <span class="vismaicon vismaicon-sm vismaicon-dynamic vismaicon-logout" aria-hidden="true"></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:

More simple example (one level):

Replace the navbar brand with your own text. There are 2 options: have simply a name or a dropdown that can help the user navigate through products. Check the example below.

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.

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" 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="first-level-item">
            <form class="navbar-form" role="search">
               <div 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>
               </div>
            </form>
         </li>
            ...
      </ul>
   </nav>
</header>

With shopping cart: 

					


<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="icon dropdown shopping-cart">
            <a class="dropdown-toggle" href="#!" role="button" data-toggle="dropdown" aria-label="Shopping cart" aria-expanded="false">
               <span class="vismaicon  vismaicon-dynamic vismaicon-menu vismaicon-shopping-cart" aria-hidden="true"></span>
               27.250,00 SEK
               <span class="caret"></span>
               <span class="badge">5</span>
            </a>
            <ul class="dropdown-menu" role="menu">
                ... Shopping cart items
            </ul>
         </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. 
					


<!-- Graphite version - .navbar-primary -->
<header class="navbar navbar-primary navbar-second-level" id="nc4navTopMain" role="navigation">
   ...
</header>

User details dropdown:

With icons:


With shopping cart:

With search box:

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. 
					


<!-- White version - .navbar-secondary -->
<header class="navbar navbar-secondary navbar-second-level" id="nc4navTopMain" role="navigation">
   ...
</header>

User details dropdown:

With icons:


With shopping cart:

With search box: