Navbar

Documentación y ejemplos del potente y receptivo encabezado de navegación de Resim, la barra de navegación. Incluye soporte para navegación y más.

Navbar Right

Este navbar es por defecto. Al vizualizar el navbar en tamaño pequeño y darle click en el menú de hamburguesa aparacerá el menú desde la derecha.

<header class="navbar">
   <nav class="navbar__container bg--dark">
      <div class="navbar__main">
        <div class="navbar__title">
            <a href="/">
               <h1 class="text-title">Resim</h1>
            </a>
         </div>
         <div class="navbar__content">
            <button class="btn--icon ripple d-lg-none" data-target="#navbar" data-toggle="navbar">
               <i class="fas fa-bars fa-2x"></i>
            </button>
            <ul class="navbar__list" id="navbar">
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Home</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link" data-toggle="navbar_sublist" data-target="#componentes">
                     Components <i class="arrow-bottom"></i>
                  </a>
                  <ul class="navbar__sublist" id="componentes">
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 1
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 2
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 3
                        </a>
                     </li>
                  </ul>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Examples</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Themes</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Grid</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Icons</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Blog</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
</header>

Navbar Left

Al vizualizar el navbar en tamaño pequeño y darle click en el menú de hamburguesa aparacerá el menú desde la izquierda. Usar la clase ".left" en el ".navbar__list".

<header class="navbar">
   <nav class="navbar__container bg--secondary">
      <div class="navbar__main">
        <div class="navbar__title">
            <a href="/">
               <h1 class="text-title">Resim</h1>
            </a>
         </div>
         <div class="navbar__content">
            <button class="btn--icon ripple d-lg-none" data-target="#navbar" data-toggle="navbar">
               <i class="fas fa-bars fa-2x"></i>
            </button>
            <ul class="navbar__list left" id="navbar">
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Home</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link" data-toggle="navbar_sublist" data-target="#componentes">
                     Components <i class="arrow-bottom"></i>
                  </a>
                  <ul class="navbar__sublist" id="componentes">
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 1
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 2
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 3
                        </a>
                     </li>
                  </ul>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Examples</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Themes</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Grid</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Icons</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Blog</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
</header>

Navbar collapse

Al vizualizar el navbar en tamaño pequeño y darle click en el menú de hamburguesa aparacerá el menú en forma de colapso. Usar la clase ".collapse" en el ".navbar__list".

<header class="navbar">
   <nav class="navbar__container bg--third">
      <div class="navbar__main">
        <div class="navbar__title">
            <a href="/">
               <h1 class="text-title">Resim</h1>
            </a>
         </div>
         <div class="navbar__content">
            <button class="btn--icon ripple d-lg-none" data-target="#navbar" data-toggle="navbar">
               <i class="fas fa-bars fa-2x"></i>
            </button>
            <ul class="navbar__list collapse" id="navbar">
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Home</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link" data-toggle="navbar_sublist" data-target="#componentes">
                     Components <i class="arrow-bottom"></i>
                  </a>
                  <ul class="navbar__sublist" id="componentes">
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 1
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 2
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 3
                        </a>
                     </li>
                  </ul>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Examples</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Themes</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Grid</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Icons</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Blog</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
</header>

Navbar Reverse

En tamaño pequeño el menú de hamburguesa cambia de posición con el título. Por tanto el el menú de hamburguesa va a la izquierda y el título va a la derecha. Usar la clase ".reverse" en el ".navbar__main".

<header class="navbar">
   <nav class="navbar__container bg--danger">
      <div class="navbar__main reverse">
        <div class="navbar__title">
            <a href="/">
               <h1 class="text-title">Resim</h1>
            </a>
         </div>
         <div class="navbar__content">
            <button class="btn--icon ripple d-lg-none" data-target="#navbar" data-toggle="navbar">
               <i class="fas fa-bars fa-2x"></i>
            </button>
            <ul class="navbar__list" id="navbar">
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Home</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link" data-toggle="navbar_sublist" data-target="#componentes">
                     Components <i class="arrow-bottom"></i>
                  </a>
                  <ul class="navbar__sublist" id="componentes">
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 1
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 2
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 3
                        </a>
                     </li>
                  </ul>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Examples</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Themes</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Grid</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Icons</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Blog</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
</header>

Alinear la lista del navbar(.navbar__list)

Para alinear la lista del navbar hay 3 formas, y todas ellas solo se aplican para el .navbar__list.

• 1)El por defecto.
• 2)Centrando la lista con la clase .center.
• 3)Moviendo al final con la clase .end.

En este ejemplo con la clase .end.

<header class="navbar">
   <nav class="navbar__container bg--info">
      <div class="navbar__main reverse">
        <div class="navbar__title">
            <a href="/">
               <h1 class="text-title">Resim</h1>
            </a>
         </div>
         <div class="navbar__content">
            <button class="btn--icon ripple d-lg-none" data-target="#navbar" data-toggle="navbar">
               <i class="fas fa-bars fa-2x"></i>
            </button>
            <ul class="navbar__list end" id="navbar">
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Home</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link" data-toggle="navbar_sublist" data-target="#componentes">
                     Components <i class="arrow-bottom"></i>
                  </a>
                  <ul class="navbar__sublist" id="componentes">
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 1
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 2
                        </a>
                     </li>
                     <li class="navbar__item">
                        <a href="#" class="navbar__link">
                           Component 3
                        </a>
                     </li>
                  </ul>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Examples</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Themes</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Grid</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Icons</a>
               </li>
               <li class="navbar__item">
                  <a href="#" class="navbar__link">Blog</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
</header>