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.

Below you can see multiple examples and in the right panel you can find the structure code.

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

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 and the code snippet from the right panel.

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. Just follow the code listed in the right panel.

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> (follow the example from the right panel) or add .attention class on the li tag.

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.

User details dropdown:

With icons


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.

User details dropdown:

With icons


				
<!-- 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="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>

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