Descargar Github
Español

Navbar

Es un componente responsivo donde se muestran el logo y la navegación de la página web; en pantallas pequeñas se colapsan los enlaces de navegación.

Uso

Copias el snippet HTML y ten en cuenta:

  1. El elemento con la clase nkn-navbar es el contenedor padre.
  2. El elemento con la clase nkn-navbar-heading contiene el logo y navbar toggle.
  3. El logo es el elemento que tiene la clase nkn-brand.
  4. Es el elemento con la clase nkn-icon-toggle que contiene el icono de navbar toggle. Este elemento debe tener el atributo data-nkn-role = "navbar-toggle" para poder colapsar los enlaces de navegación.

    Sólo es visible en pantallas pequeñas.

  5. El elemento con la clase nkn-navbar-content es el contenedor de los enlaces de navegación.
  6. El elemento con la clase nkn-nav contiene la lista de los enlaces de navegación.
  7. En el elemento con la clase nkn-nav-item va el enlace de navegación.
  8. Para indicar en qué enlace estas actualmente, se usa la clase nkn-active junto a la clase nkn-nav-item.

Ejemplo

Snippet HTML