Header Menú

Componentes

Header menu

Un menú de navegación, está compuesto por listas de características o categorías de contenido. Por norma general, se presentan como un conjunto de enlaces o iconos agrupados, con un estilo visual distinto al resto del diseño de la interfaz.

Los menús de navegación son realmente importantes y deben servir de ayuda a los usuarios para poder localizar y acceder a los contenidos del sitio web.

Pautas claves

  • Ubicación: el menú debe estar ubicado en lugares con los que el usuario se sienta familiarizado y sea fácil para él encontrarlos.
  • Interacción: los enlaces del menú deben lucir como tal y mostrar interactividad. Es decir, hay que mostrar a través de la UI , que son cliqueables o que se pueden tocar dependiendo del dispositivo.
  • Peso visual: hay que asegurarse de que los menús tengan el suficiente peso visual. Si se ubican en su posición natural dentro de la estructura, suelen ser rápidamente localizados por parte de los usuarios. Si por el contrario, la estructura de la interfaz es desordenada, y los menús no se encuentran en posiciones lógicas, u ocultos, puede usarse algún recurso gráfico para destacarlos.
  • Contraste: el color de los textos que son enlaces, deben contrastar con el color de fondo. Tener un buen contraste hará que sean fácilmente visibles para los usuarios.
  • Marcadores visuales: indicar a los usuarios “dónde” se encuentra la pantalla que actualmente están visualizando dentro del menú.
  • Etiquetas entendibles: no usar palabras o términos abstractos, técnicos o lenguaje interno. Es recomendable averiguar qué y cómo buscan los usuarios para poder trabajar un menú adecuado.
  • Dropdown y contenido de nivel inferior: cuando se utilizan megamenús o menús desplegables, es conveniente dividir el contenido en categorías y/o subcategorías que aglutinan los enlaces. Mediante un dropdown se puede mostrar al usuario todos los niveles y el contenido de la web.
  • Comunicación visual: las imágenes, íconos o colores pueden ayudar a los usuarios a comprender las opciones del menú. No conviene sobrecargar, hay que asegurarse de que las imágenes sean compatibles con las tareas del usuario y no dificulten su ejecución.
  • Tamaño de los enlaces: el tamaño de los enlaces deben ser lo suficientemente grandes como para lucir cliqueables o tocables.
  • Sticky o menú pegajoso: si la página es extensa, y tiene exceso de contenido, es recomendable utilizar un menú fijo en la parte superior que permitirá acompañar al usuario cuando realice scroll durante la navegación.

Definimos algunos estados y variaciones del header menú, que permitirán al usuario mantenerse informado de los contenidos y navegación dentro del sitio.

Header menu con elementos de navegación + marcador visual actual de navegación


        


<header id="uft-header">


    <div id="uft-header-top"></div>


    <nav class="uft-navbar">


        <!-- Menú para versión Escritorio -->


        <div class="d-none d-md-block py-2">


            <div class="container bg-transparent">


                <div class="row align-items-center">


                    <div class="col-md-3 col-xl-2">


                        <a href="#">


                            <img src="https://kitdigital.finis.cl/recursos/assets/img/logo-uft.svg" alt="Universidad Finis Terrae" class="uft-logo img-fluid">


                        </a>


                    </div>


                    <div class="col-md-9 col-xl-10">


                        <ul class="uft-navbar_nav">


                            <li class="current-menu-item"><a href="#" aria-current="page">Inicio</a></li>


                            <li class="menu-has-submenu"><a href="#">Nuestra Universidad</a>


                                <ul class="sub-menu">


                                    <li><a href="#">Nuestra Identidad</a></li>


                                    <li><a href="#">Autoridades</a></li>


                                </ul>


                            </li>


                            <li class="ml-auto">


                                <form action="#" id="form-search" class="form-search">


                                    <input type="search" name="s" placeholder="Buscar...">


                                    <button type="submit" class="form-search-submit">


                                        <span class="uft-icon uft-icon--rounded">search</span>


                                    </button>


                                </form>


                            </li>


                        </ul>


                    </div>


                </div>


            </div>


        </div>


        <!-- Menú para versión Móvil -->


        <div class="uft-navbar_mobile d-block d-md-none">


            <div class="uft-navbar_mobile-bar navbar-brand">


                <div class="uft-navbar_mobile-header">


                    <a href="#">


                        <img src="https://kitdigital.finis.cl/recursos/assets/img/logo-uft.svg" alt="Universidad Finis Terrae" class="uft-logo img-fluid">


                    </a>


                </div>


                <a href="javascript:void(0);" class="uft-navbar_mobile-button">


                    <span class="uft-icon-bar"></span>


                    <span class="uft-icon-bar"></span>


                    <span class="uft-icon-bar"></span>


                    Menú


                </a>


            </div>


            <div class="uft-navbar_mobile-content">


                <ul class="uft-navbar_mobile-list">


                    <li class="menu-item current-menu-item"><a href="#" aria-current="page">Inicio</a></li>


                    <li class="menu-item menu-has-submenu"><a href="#">Nuestra Universidad</a>


                        <ul class="sub-menu">


                            <li><a href="#">Nuestra Identidad</a></li>


                            <li><a href="#">Autoridades</a></li>


                        </ul>


                    </li>


                </ul>


            </div>


        </div>


    </nav>


</header>