Navigation Bar

The Unkuna navigation bar is...

Example

Open in new tab

Play air guitar and play it loud!!!

HTML Structure

Copy source

You can edit this source code and view your changes in the example above. Click the "copy" icon to copy the source code to the clipboard.


        

Usage

Por convención, cada elemento <li> debe contener un elemento HTML <a>, excepto el elemento <li> que contenga la clase class="nkn-navbar-toggle". Si no colocamos el elemento <a> dentro de sus elemento <li>, probablemente tendrá que copiar los estilos del elemento <a> al elemento <li>.

CSS class names.

Class Description
"nkn-navbar" Es la clase para el contenedor <ul>
"nkn-show-always" El elemento <li> que contenga esta clase siempre se mostrara.
"nkn-nav-left" Posiciona al elemento <li> a la izquierda del navbar, va junto con la clase "nkn-show-always".
"nkn-nav-right" Posiciona al elemento <li> a la derecha del navbar, va junto con la clase "nkn-show-always".
"nkn-focus-link" Es la clase que permite enfocar un elemento <li> en el navbar
"nkn-navbar-toggle" Esta clase es para abrir o cerrar el contenido del navbar y esta presente sólo en dispositivos menores o iguales a 768px

HTML data-attributes.

Data role Description
data-nkn-role="navbar-toggle" For the javascript to open or close the menu