Download Github
English

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:

  1. The element with the nkn-navbar class is the parent container.
  2. The element with the class nkn-navbar-heading contains the logo and navbar toggle.
  3. The logo is the element that has the nkn-brand class.
  4. 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.

  5. The element with the nkn-navbar-content class is the container for the navigation links.
  6. The element with the nkn-nav class contains the list of navigation links.
  7. In the element with the class nkn-nav-item goes the navigation link.
  8. To indicate which link you are currently on, the nkn-active class is used together with the nkn-nav-item class.

Example

HTML Snippet