Navbar
It is a responsive component where the logo and the navigation of the web page are displayed; navigation links collapse on small screens.
Use
Copy the HTML snippet and keep in mind:
- The element with the nkn-navbar class is the parent container.
- The element with the class nkn-navbar-heading contains the logo and navbar toggle.
- The logo is the element that has the nkn-brand class.
-
The element with the nkn-icon-toggle class contains the navbar toggle icon.
This element must have the attribute data-nkn-role = "navbar-toggle" in order to collapse the navigation links.
It is only visible on small screens.
- The element with the nkn-navbar-content class is the container for the navigation links.
- The element with the nkn-nav class contains the list of navigation links.
- In the element with the class nkn-nav-item goes the navigation link.
- To indicate which link you are currently on, the nkn-active class is used together with the nkn-nav-item class.