Navbar

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:51

Navbar

Curso de Tailwind CSS 1

Clase 26 de 29

Clase 26 / 29

Recursos

¿Cómo crear una barra de navegación con filtros en un proyecto web?

Crear una barra de navegación en un proyecto web puede mejorar la experiencia del usuario al ofrecer opciones de búsqueda y filtrado. Iniciarás insertando el componente de la barra de navegación dentro del encabezado del sitio. Luego, organiza la estructura para contemplar una búsqueda y filtros como calificación y precios. Aquí, te guiamos a través del proceso con algunos consejos útiles.

¿Cómo estructurar la barra de navegación?

Para estructurar adecuadamente la barra de navegación, primero debes crear la etiqueta o componente Navbar en tu código y encapsularlo dentro de las etiquetas del encabezado (header) de la página. Posteriormente, define las secciones que incluirá la barra:

Búsqueda: Implementa un campo de entrada reutilizando un componente de control de formulario existente (FormControl).
Filtros: Crea secciones para filtrar por precio y calificación.

Usa técnicas de diseño CSS para definir colores y márgenes. Por ejemplo, puedes establecer un color similar al del fondo del encabezado y dar un margen para evitar que el contenido esté pegado a los bordes.

<nav>
  <!-- Componente de búsqueda -->
  <input type="text" placeholder="Buscar..." />

  <!-- Sección de filtros -->
  <div class="filters">
    <!-- Filtro de precios -->
    <div class="price-filter">
      <span>$</span>
      <span>$$</span>
      <span>$$$</span>
    </div>

    <!-- Filtro de calificación -->
    <div class="rating-filter">
      ★ ★ ★ ★ ★
    </div>

    <!-- Botón de aplicar filtros -->
    <button type="button" class="filter-btn">Filtrar</button>
  </div>
</nav>

¿Cómo implementar los filtros?

Filtro de precio: Define símbolos de dólar para indicar rangos de precios. La cantidad de símbolos representará si es barato o caro. Usa propiedades CSS como display: flex; para mantener los símbolos en línea y agrégales separación.

.price-filter {
  display: flex;
  gap: 10px;
}

Filtro de calificación: Usa estrellas para representar las calificaciones. Puedes utilizar entidades HTML para las estrellas y ajustar su espaciado.

<div class="rating-filter">
  ★ ★ ★ ★ ★
</div>

Modifica el diseño para resaltar cuando un filtro específico está seleccionado. Usa clases CSS adicionales para indicar selección.

Botón de filtrar: Reutiliza clases CSS de estilos previos para mantener un diseño uniforme. Ubica el botón al final de la sección de filtros y aplica un estilo distintivo.

¿Cómo crear un diseño responsivo?

Asegúrate de que tu barra de navegación se vea bien en diferentes tamaños de pantalla usando diseño responsivo.

Verifica el diseño usando herramientas de desarrollo para cambiar entre vistas.
Aplica flex solo en tamaños medianos o más grandes.

@media (min-width: 768px) {
  .navbar {
    display: flex;
  }
}

Realiza mejoras incrementales para garantizar que los filtros y el botón se adapten correctamente en diversas resoluciones.

Conclusión

Con estas instrucciones, puedes estructurar y personalizar una barra de navegación efectiva con búsqueda y filtros en tu proyecto web. Esto proporciona a los usuarios una experiencia de interacción mejorada y contribuye significativamente a la funcionalidad del sitio. ¡Anímate a experimentar y adaptar estos consejos a tus necesidades específicas! Si te encuentras con dudas, no dudes en consultarlas en la sección de comentarios.