Navegación

Navbar

Se inicia con la clase .navbar dentro de un nav tag y tiene definidos los estilos para títulos, hipervinculos y botones.


<nav class="navbar">
  <h1>Título</h1>
  <span class="flex"></span>
  <a href="#">Hipervínculo</a>
  <button>Botón</button>
</nav>

Posicionamiento

Navegación fija

Se agrega la clase .navbar-fix-top a la etiqueta de la navegación para dejarla fija arriba ó .navbar-fix-bottom para dejarla fija abajo.

Para agregar el margen al primer elemento cuando la navegación está fija, hay que agregar la clase navbar-fixed-top ó navbar-fixed-bootom al contenedor, según sea el caso.

... pero no se puede poner el ejemplo porque rompería la navegación y el footer que tiene ésta página. Así que tengan un poco de imaginación :}


<nav class="navbar navbar-fix-top">
  <h1>Título</h1>
  <span class="flex"></span>
  <a href="#">Hipervínculo</a>
  <a href="#">Hipervínculo</a>
  <a href="#">Hipervínculo</a>
</nav>

<div class="navbar-fixed-top">
  ...
</div>

Colores

Se puede cambiar y combinar el color de contenido y de fondo de la barra de navegación.

Para cambiar el color de texto, hipervínculos y botones se utilizan las clases .color-primary y .color-accent, para cambiar el color de fondo se utilizan .bg-primary y .bg-accent.


<nav class="navbar color-primary">
  <h1>Título</h1>
  <span class="flex"></span>
  <a href="#">Hipervínculo</a>
  <button>Botón</button>
</nav>


                                <nav class="navbar color-accent">
                <h1>Título</h1>
                <span class="flex"></span>
                <a href="#">Hipervínculo</a>
                <button>Botón</button>
                </nav>


<nav class="navbar bg-primary">
  <h1>Título</h1>
  <span class="flex"></span>
  <a href="#">Hipervínculo</a>
  <button>Botón</button>
</nav>


<nav class="navbar bg-accent">
  <h1>Título</h1>
  <span class="flex"></span>
  <a href="#">Hipervínculo</a>
  <button>Botón</button>
</nav>

Composicion

Al lado

Para dejar el título de un lado y el menú del otro, se puede agregar un .flex para agregar los espacios.


<nav class="navbar bg-accent">
  <a href="#">Menú</a>
  <a href="#">Menú</a>
  <a href="#">Menú</a>
  <span class="flex"></span>
  <h1>Título</h1>
</nav>

Contenido centrado

Para centrar el contenido se agrega la clase .navbar-center-content a la etiqueta de la navegación.


<nav class="navbar navbar-center-content">
  <a href="#">Menú</a>
  <a href="#">Menú</a>
  <h3>Título</h3>
  <a href="#">Menú</a>
  <a href="#">Menú</a>
</nav>

Elemento centrado

Para centrar específicamente algo, se agrega la clase .navbar-center-element al elemento y .navbar-block-elements a la etiqueta de la navegación..


<nav class="navbar navbar-block-elements">
  <h1 class="navbar-center-element">Centro</h1>
  <a href="#">Menú</a>
  <span class="flex"></span>
  <button>Botón</button>
</nav>

Botón de menú

Con la clase .navbar-button-menu el botón toma el alto de la navegación y quita sus border y margenes.


<nav class="navbar navbar-block-elements">
  <h1 class="navbar-center-element">Centro</h1>
  <button class="navbar-button-menu">Botón</button>
</nav>

Menú de aplicación

Con la clase .navbar-button-menu el botón toma el alto de la navegación y quita sus border y margenes.


<nav class="navbar navbar-app-button">
  <button>Botón</button>
  <button>Botón</button>
  <button>Botón</button>
  <button>Botón</button>
</nav>