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
Complex example (three levels, product selection dropdown, user details dropdown):
User details dropdown:
More simple example (one level):
Brand text
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.
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.
<span class="badge">+99</span>
or add .attention
class on the li
tag.
With search box
With shopping cart
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
White navigation