colección de gratis Ruta de navegación HTML y CSS ejemplos de código de navegación: simple, receptivo, multilínea, colapsado, etc. Actualización de la colección de febrero de 2018. 3 artículos nuevos.

Artículos relacionados

sobre el código

CSS sencillo.

sobre el código

Siéntete libre de personalizarlo a tu manera. Colores, tamaños, sombras, bordes, etc. Hecho con Oreja.

sobre el código

Pan rallado con puntos suspensivos "inteligentes" (Flex)

Juega con el tamaño del navegador para ver cómo se comportan cuando no queda espacio para ellos.

sobre el código

Este ejemplo muestra lo que sucede cuando un usuario se acerca al botón Atrás. Las migas de pan se expanden y permiten que el usuario navegue a casi cualquier otro lugar del curso con un impacto mínimo en el espacio.

Breadcrumbs con propiedades personalizadas de CSS como API.
Realizado por Stas Mélnikov
15 de junio de 2017

Flechas de migas de pan de CSS puro multilínea adaptativas.
Hecho por Glynn Smith
30 de mayo de 2017

GIF de demostración: Migas de pan

Migas de pan HTML y CSS.
Hecho por Dany Santos
15 de julio de 2016

Miga de pan Material Design, rastreador de progreso.
Hecho por Shyam Chen
30 de julio de 2015

Una lista de migas de pan colapsó para mostrar solo el texto de vista previa para todos menos la página actual, con el texto completo que se muestra al pasar el mouse/enfocar.
Hecho por skye
4 de marzo de 2015

Migas de pan sensibles a CSS puro.
Realizado por Oliver Knoblich
2 de abril de 2014

CSS y CSS3 han recorrido un largo camino en los últimos tiempos, por lo que ya no se requieren los estilos antiguos que usan imágenes en el fondo para obtener la forma correcta.

En este artículo, te mostraré cómo hacer migas de pan en un sitio web utilizando HTML plano y CSS. También puedes mirar sitios interesantes, algo te puede venir bien. Hace poco hice una compilación.

Al final obtendremos el siguiente resultado:

Anteriormente, para hacer flechas transparentes entre dos bloques, se usaba una imagen de fondo transparente. Ahora este problema se puede resolver usando solo CSS.

1. Migas de marco

Primero, creemos una lista con viñetas:

, que lo hará
• elementos. Breadcrumb se agregará agregando nuevos
• .

  2. Agregar CSS

  Ahora escribamos el CSS para que se vea así:

  

  #crumbs ul li a (pantalla: bloque; flotante: izquierda; altura: 50px; fondo: #3498db; alineación de texto: centro; relleno: 30px 40px 0 40px; posición: relativa; margen: 0 10px 0 0; tamaño de fuente : 20px; texto-decoración: ninguno; color: #fff; )

  Estos estilos agregan:

  1. vista de bloque y color azul
  2. centrar el texto y hacerlo blanco
  3. liso relleno para que el bloque se visualice correctamente en vertical
  4. restablece otros estilos para enlaces con texto-decoración: ninguno

  Atención: posición: relativa agregado para luego contener todas las unidades interiores con posición: absoluta.

  3. Cómo crear el efecto de flecha

  

  #crumbs ul li a:después (contenido: ""; borde superior: 40 px rojo sólido; borde inferior: 40 px rojo sólido; borde izquierdo: 40 px azul sólido; posición: absoluta; derecha: -40 px; superior: 0; )

  Para crear flechas, usaremos la propiedad :después, que le permite crear un elemento adicional después del padre. le agregamos posición: absoluta eso es lo que hicimos positivo: relativo para enlaces mantener absoluto propiedad dentro del enlace y manipularlo como queramos.

  La apariencia de la flecha se hará usando bordes. El ejemplo usa rojo a propósito, pero para que parezca un triángulo, usará transparente. Más borde será empujado en su lugar usando posición: absoluta.

  4. Agrega transparencia con borde

  

  Cambiamos rojo V borde en transparente para crear un efecto de transparencia.

  Borde superior: 40 px sólido transparente; borde inferior: 40px sólido transparente; borde izquierdo: 40px sólido #3498db;

  5. Agregue una flecha en la parte posterior

  

  #crumbs ul li a:before ( contenido: ""; borde superior: 40px sólido transparente; borde inferior: 40px sólido transparente; borde izquierdo: 40px sólido #d4f2ff; posición: absoluta; izquierda: 0; superior: 0; )

  Usando el mismo principio que en el tercer paso, puede crear un triángulo transparente detrás del bloque. Color borde debe establecerse como el color de fondo del sitio para crear un efecto transparente.

  

  Relleno: 30px 40px 0 80px;

  5. Agregar nuevos elementos

  Al agregar nuevos

• aumentar la profundidad del pan rallado.
  • Uno
  • Dos
  • Tres
  • cuatro
  • Cinco

  6. Primero y último

  

  Para crear un efecto redondeado para el primer y último elemento de la ruta de navegación, usaremos :primer hijo Y :último niño.

  #crumbs ul li:primer-hijo a (borde-arriba-izquierda-radio: 10px; borde-inferior-izquierda-radio: 10px; ) #migajas ul li:primer-hijo a:antes (display: none; ) #crumbs ul li: último hijo a ( relleno derecho: 80 px; borde superior derecho radio: 10 px; borde inferior derecho radio: 10 px; ) #crumbs ul li: último hijo a: después ( pantalla: ninguno ; )

  7. Añadir efecto de desplazamiento

  #crumbs ul li a:hover ( fondo: #fa5ba5; ) #crumbs ul li a:hover:después ( border-left-color: #fa5ba5; )

  Además, no olvides agregar borde-radio al pasar el cursor sobre el primer y último elemento de la ruta de navegación.

  Eso es todo. Si tiene alguna pregunta, escriba comentarios y comparta el artículo si le gustó.

  Cómo hacer migas de pan en tu sitio web con CSS por bologer

  Gracias al desarrollo de CSS y CSS3 en los últimos años, hemos llegado al punto en que muchas soluciones de software antiguas que involucran imágenes de fondo ahora pueden construirse completamente en CSS. En este tutorial, veremos cómo crear una secuencia de enlaces de navegación llamada "miga de pan" en un estilo plano, sin la necesidad de la técnica de imagen de fondo popular anteriormente llamada método de "puerta corrediza".

  

  Las migas de pan que crearemos están estilizadas como cheurones para visualizar la idea de contenido estructurado. Anteriormente, habríamos usado una imagen de fondo PNG para crear esta forma de cheurón, pero ahora, con una técnica de borde inteligente, podemos crear el mismo efecto usando solo CSS.

  • Migaja de pan

  Comenzaremos creando enlaces de navegación de migas de pan como una lista desordenada. Cada pan rallado será un elemento

• con el elemento de anclaje instalado.

  

  #crumbs ul li a (pantalla: bloque; flotador: izquierda; altura: 50px; fondo: #3498db; alineación de texto: centro; relleno: 30px 40px 0 40px; posición: relativa; margen: 0 10px 0 0; tamaño de fuente : 20px ; texto-decoración : ninguno ; color : #fff ; )

  El código CSS inicial establece el anclaje de cada elemento de la lista en un estilo de rectángulo azul ordenado. El texto está centrado y se agrega el mismo relleno en todos los lados. Para posicionar los elementos absolutamente siguientes, se ha agregado una propiedad de posición: relativa; a esos elementos para que esos elementos absolutamente posicionados aparezcan en relación con ese elemento principal.

  

  #crumbs ul li a:after (contenido: "" ; borde superior : 40px rojo sólido ; borde inferior : 40px rojo sólido ; borde izquierdo : 40px azul sólido ; posición : absoluta ; derecha : -40px ; superior : 0 ; )

  Ahora crearemos un efecto de chevron en CSS, que anteriormente solo se podía lograr usando una imagen de fondo. Utilice el selector :after para crear un elemento adicional al que se le pueda aplicar un estilo individual. La forma triangular se crea utilizando diferentes bordes CSS, por lo que, como puede ver en la imagen anterior, el triángulo azul se puede crear aplicando bordes superior e inferior para intersectar el área de cobertura. Estos bordes están coloreados en rojo para mayor claridad, pero si son transparentes, resultará un triángulo azul. Este efecto de borde luego se mueve a su lugar utilizando el posicionamiento absoluto.

  

  Borde superior: 40px sólido transparente; borde inferior: 40px sólido transparente; borde izquierdo: 40px sólido #3498db;

  El efecto de borde con los valores de color correctos creará el triángulo deseado que le da a las migas de pan la popular forma de cheurón.

  

  #crumbs ul li a:before ( contenido : "" ; borde superior : 40px sólido transparente ; borde inferior : 40px sólido transparente ; borde izquierdo : 40px sólido #d4f2ff ; posición : absoluta ; izquierda : 0 ; superior : 0 ; )

  Usando los mismos principios, se puede aplicar otra forma triangular al lado izquierdo de la miga de pan. Esta vez, el color del borde se establece en el mismo color que el color de fondo para ocultar partes del color de fondo azul del vínculo.

  

  Relleno: 30px 40px 0 80px;

  

  • Uno
  • Dos
  • Tres
  • cuatro
  • Cinco

  A medida que se agregan enlaces al HTML, aumenta la secuencia de migas de pan, separadas por cheurones de forma interesante, gracias al efecto de borde triangular CSS y un ligero margen derecho.

  

  #crumbs ul li:primer-hijo a (borde-arriba-izquierda-radio: 10px; borde-inferior-izquierda-radio: 10px;) #migajas ul li:primer-hijo a:antes (display: none;) #crumbs ul li:último-hijo a (relleno-derecha: 80px; borde-superior-derecha-radio: 10px; borde-inferior-derecha-radio: 10px;) #crumbs ul li:último-hijo a:después (pantalla: ninguno ; )

  El cuadro de migas de pan completo se puede diseñar aún más eliminando el efecto de triángulo del primer y último elemento con los selectores :first-child y :last-child, después de lo cual puede redondear un poco las esquinas con la propiedad border-radius.

  

  #crumbs ul li a:hover (fondo: #fa5ba5;) #crumbs ul li a:hover:después (border-left-color: #fa5ba5;)

  Todo lo que queda es aplicar el efecto de desplazamiento a los enlaces. No olvide cambiar el valor de la propiedad border-left-color para el efecto de triángulo en el estado de desplazamiento para que toda la ruta de navegación cambie de color.

  Traducción - Escritorio

  Saludos. Las migas de pan son un bloque bastante útil en cualquier sitio web porque le permite ver la ruta completa a la página en la que se encuentra actualmente. Y hoy les diré cómo aplicar estilo a las migas de pan en css. No crear, es decir, disponer. En general, hay muchas opciones, me referiré a dos.

  Una opción de diseño simple, sin imagen.

  El código html imita las migas de pan. Que sea así:

  En principio, solo puede colocar un paréntesis angular, pero luego no habrá forma de controlar el grosor de la línea. Propongo hacerlo de otra manera, con la ayuda de transformaciones. Aquí está el código que lo hará:

  Cumbs1 a:no(:último hijo):después(
  contenido: "";
  pantalla: bloque en línea
  ancho: 5px
  altura: 5px;
  borde superior: 2px negro sólido;
  borde derecho: 2px negro sólido;
  transformar: rotar (45 grados);
  margen izquierdo: 5px
  }
  .cumbs1 a: hover (
  Color naranja;
  }

  Quizás para ti sean selectores complicados, entonces echa un vistazo a este artículo. La conclusión es esta: usar el pseudo-elemento (sobre qué es y cómo usar - ) después de agregar nuestro separador al final de cada enlace. Se forma utilizando dos marcos y se gira 45 grados. También agregamos un color naranja a los enlaces flotantes. Aquí, en principio, y todo el diseño.

  Otra opción de diseño: con una imagen.

  En este caso, las migas de pan se verán más interesantes, así:
  
  Para hacer esto, necesitamos una imagen y algunos estilos css:

  Cums2(
  fondo: naranja;
  ancho máximo: 250px
  }
  .cumbs2 a(
  pantalla: bloque en línea
  relleno: 7px 0
  color: #000;
  }
  .cumbs2 a:not(:último hijo)(
  fondo: url(flecha.png) sin repetición 100% 50%;
  relleno derecho: 33px;
  }

  No proporciono el código html porque es el mismo que en el primer caso. ¿Por dónde empezar aquí? Primero, definimos el color de fondo y el tamaño de todo el bloque con migas de pan. A continuación, establecemos los estilos generales para los enlaces: tipo de bloque en línea, sangría en la parte superior e inferior y color.

  El siguiente paso es el más interesante: utilizando la pseudoclase not, seleccione todos los enlaces en el bloque, excepto el último, y configure la imagen de fondo arrow.png para ellos, sin repetición, con la posición de fondo en el medio en alto y al final en el ancho de un eslabón. Los primeros dos enlaces necesitan la sangría interna a la derecha solo para colocar la imagen allí. Si no estuviera allí, la imagen se encontraría con el texto.

  Cómo funciona la pseudoclase no, creo que ya lo ha adivinado: selecciona todos los elementos, excepto lo que se indica entre paréntesis. En todo caso, en el futuro escribiré otra breve nota sobre cómo trabajar con la pseudoclase: not, donde todo será más claro. Bueno, aquí hay 2 diseños simples de migas de pan que puedes usar para hacer los tuyos.

  Preciosa y original selección de migas de pan, que están realizadas en un diseño plano, utilizando CSS3, en una paleta de tonalidades diferente. Por supuesto, la visibilidad de la navegación, en forma de botones, ayuda perfectamente tanto al usuario del sitio como a los invitados, es navegar por el recurso de Internet, donde puede navegar por frases clave que se nos mostrarán. Pero también se adapta perfectamente al estilo, cada vez más se puede ver que algunas personas lo instalan en el módulo del foro, sin mencionar el diseño moderno.

  Si tiene, como cree, mucho material, se recomienda habilitar esta funcionalidad aquí. El estilo de la lista no será para evitar el punto negro de la lista u otro estilo que sea el predeterminado. Porque lo categoriza y ciertamente los módulos, comenzando desde la página principal, y todo se presenta de una manera elegante. En este material se observa una selección que está hecha en el mismo estilo, es en un estilo plano.

  Aquí en forma son completamente diferentes, que alguien ni siquiera necesitará editar para que se ajusten a su diseño, ya que encajará perfectamente en él. Ahora usaremos el código css para hacer el ancla de la primera lista y configurar el ancla del último hijo para que sea el valor predeterminado para que el tringle no aparezca en el ancla del primer hijo para el ancla de la izquierda y el último niño por el lado derecho.

  hacer migas de pan

  1. En un tono amarillo claro:

  2. Paleta de luces con tonos verdes:

  3. En color frambuesa

  4. Hecho en una paleta azul:

  Será una simple lista directa con un fondo y relleno y algún otro estilo. Después de eso, crearé una estructura triangular en el lado derecho de cada ancla de la lista usando CSS, jugando con las propiedades del broder.

  Como puede ver en la demostración, cuando colocamos cualquier ancla de lista en los cofres de empanado, da un efecto que significará visitado o está en esta sección.

  O podemos imaginar su efecto para hacerlo activo como pan rallado activo. Puede decir que estas migas de pan css son solo migas de pan porque solo usaré css y css3 para hacer estas migas de pan.

  Comencemos la instalación:

  
  

  
  
  • № 1
  
  
  • № 1
  
  
  • № 3
  
  
  • № 4
  
  
  • № 5
  
  

  
  
  
  
  
  

  
  
  • Sección 1
  
  
  • Sección 2
  
  
  • Seccion 3
  
  
  • Sección 4
  
  
  • Sección 5
  
  

  
  
  
  
  
  

  
  
  • ZOR 1
  
  
  • ZOR 2
  
  
  • ZOR 3
  
  
  • ZOR 4
  
  
  • ZOR 5
  
  

  
  
  
  
  
  

  
  
  • Haga clic en 1
  
  
  • Haga clic en 2
  
  
  • Haga clic en 3
  
  
  • Haga clic en 4
  
  
  • Haga clic en 5
  
  

  
  
  
  CSS

  El estilo de la lista no será para evitar el punto negro de la lista u otro estilo que sea el predeterminado. Cada lista div en línea será lista en línea para convertirla en una lista horizontal usando css display: list-inline.
  

  #breadcrumb-isanchogives1 (
  alineación de texto: centro;
  margen superior: 30px;
  }

  #breadcrumb-isanchogives1 ul (
  estilo de lista: ninguno;
  pantalla: tabla en línea;
  }
  #breadcrumb-isanchogives1 ul li (
  pantalla: en línea;
  }

  #breadcrumb-isanchogives1 ul li a (
  bloqueo de pantalla;
  flotador izquierdo;
  altura: 50px;
  fondo: #ffd928;
  alineación de texto: centro;
  relleno: 30px 40px 0 80px;
  posición: relativa;
  margen: 0 10px 0 0;

  tamaño de fuente: 20px
  texto-decoración: ninguno;
  color: #fff;

  }
  #breadcrumb-isanchogives1 ul li a:después (
  contenido: "";
  
  borde izquierdo: 40px sólido #ffd928;
  índice z: 1;

  #breadcrumb-isanchogives1 ul li a:before (
  contenido: "";
  borde superior: 40px sólido transparente;
  borde inferior: 40px sólido transparente;
  
  }

  #breadcrumb-isanchogives1 ul li:primer hijo a (
  }
  #breadcrumb-isanchogives1 ul li:first-child a:before (
  pantalla: ninguno;
  }

  #breadcrumb-isanchogives1 ul li:last-child a (
  relleno derecho: 80px;
  }
  #breadcrumb-isanchogives1 ul li:last-child a:after (
  pantalla: ninguno;
  }

  #breadcrumb-isanchogives1 ul li a:hover (
  fondo: #ff9a2d;
  }
  #breadcrumb-isanchogives1 ul li a.wesove-readcrum(
  fondo: #ff9a2d;
  }
  #breadcrumb-isanchogives1 ul li a:hover:after (
  borde-izquierda-color: #ff9a2d;
  }
  #breadcrumb-isanchogives1 ul li a.wesove-readcrum:después (
  borde-izquierda-color: #ff9a2d;
  }

  #breadcrumb-isanchogives2 (
  alineación de texto: centro;
  margen superior: 30px;
  }

  #breadcrumb-isanchogives2 ul (
  estilo de lista: ninguno;
  pantalla: tabla en línea;
  }
  #breadcrumb-isanchogives2 ul li (
  pantalla: en línea;
  }

  #breadcrumb-isanchogives2 ul li a (
  bloqueo de pantalla;
  flotador izquierdo;
  altura: 50px;
  fondo: #56e9ae;
  alineación de texto: centro;
  relleno: 30px 40px 0 80px;
  posición: relativa;
  margen: 0 10px 0 0;

  tamaño de fuente: 20px
  texto-decoración: ninguno;
  color: #fff;

  }
  #breadcrumb-isanchogives2 ul li a:después (
  contenido: "";
  borde superior: 40px sólido transparente;
  borde inferior: 40px sólido transparente;
  borde izquierdo: 40px sólido #56e9ae;
  posición: absoluta; derecha: -40px; superior: 0;
  índice z: 1;

  #breadcrumb-isanchogives2 ul li a:before (
  contenido: "";
  borde superior: 40px sólido transparente;
  borde inferior: 40px sólido transparente;
  borde izquierdo: 40px sólido #f2f2f2;
  posición: absoluta; izquierda: 0; superior: 0;
  }

  #breadcrumb-isanchogives2 ul li:primer hijo a (
  }

  #breadcrumb-isanchogives2 ul li:last-child a (
  relleno derecho: 80px;
  }

  #breadcrumb-isanchogives2 ul li a:hover (
  fondo: #49c593;
  }
  #breadcrumb-isanchogives2 ul li a.wesove-readcrum (
  fondo: #49c593;
  }
  #breadcrumb-isanchogives2 ul li a:hover:after (
  borde-izquierdo-color: #49c593;
  }
  #breadcrumb-isanchogives2 ul li a.wesove-readcrum:después (
  borde-izquierdo-color: #49c593;
  }

  #breadcrumb-isanchogives3 (
  alineación de texto: centro;
  margen superior: 30px;
  }

  #breadcrumb-isanchogives3 ul (
  estilo de lista: ninguno;
  pantalla: tabla en línea;
  }
  #breadcrumb-isanchogives3 ul li (
  pantalla: en línea;
  }

  #breadcrumb-isanchogives3 ul li a (
  bloqueo de pantalla;
  flotador izquierdo;
  altura: 50px;
  fondo: #ff818b;
  alineación de texto: centro;
  relleno: 30px 40px 0 80px;
  posición: relativa;
  margen: 0 10px 0 0;

  tamaño de fuente: 20px
  texto-decoración: ninguno;
  color: #fff;

  }
  #breadcrumb-isanchogives3 ul li a:después (
  contenido: "";
  altura: 80px;
  ancho: 40px;
  fondo: #ff818b;
  posición: absoluta; derecha: -40px; superior: 0;
  índice z: 1;

  #breadcrumb-isanchogives3 ul li a:before (
  contenido: "";
  altura: 80px;
  ancho: 40px;
  borde-radio:0px 40px 40px 0px;
  fondo:#f2f2f2;
  posición: absoluta; izquierda: 0; superior: 0;
  }

  #breadcrumb-isanchogives3 ul li:primer hijo a (
  borde-superior-izquierda-radio: 10px; borde-inferior-izquierda-radio: 10px;
  }
  #breadcrumb-isanchogives3 ul li:first-child a:before (
  pantalla: ninguno;
  }

  #breadcrumb-isanchogives3 ul li:last-child a (
  relleno derecho: 80px;
  borde-superior-derecho-radio: 10px; borde-inferior-derecho-radio: 10px;
  }
  #breadcrumb-isanchogives3 ul li:last-child a:after (
  pantalla: ninguno;
  }

  #breadcrumb-isanchogives3 ul li a:hover (
  fondo: #ea606b;
  }
  #breadcrumb-isanchogives3 ul li a.wesove-readcrum (
  fondo: #ea606b;
  }
  #breadcrumb-isanchogives3 ul li a:hover:después de (
  fondo: #ea606b;
  }
  #breadcrumb-isanchogives3 ul li a.wesove-readcrum:después (
  fondo: #ea606b;
  }

  #breadcrumb-isanchogives4 (
  alineación de texto: centro;
  margen superior: 30px;
  }

  #breadcrumb-isanchogives4 ul (
  estilo de lista: ninguno;
  pantalla: tabla en línea;
  }
  #breadcrumb-isanchogives4 ul li (
  pantalla: en línea;
  }

  #breadcrumb-isanchogives4 ul li a (
  bloqueo de pantalla;
  flotador izquierdo;
  altura: 50px;
  fondo: #2b97cc;
  alineación de texto: centro;
  relleno: 30px 40px 0 80px;
  posición: relativa;
  margen: 0 10px 0 0;

  tamaño de fuente: 20px
  texto-decoración: ninguno;
  color: #fff;

  }
  #breadcrumb-isanchogives4 ul li a:después (
  contenido: "";
  altura: 80px;
  ancho: 40px;
  borde-radio:0px 40px 40px 0px;
  fondo:#2b97cc;
  posición: absoluta; derecha: -40px; superior: 0;
  índice z: 1;

  #breadcrumb-isanchogives4 ul li a:before (
  contenido: "";
  altura: 80px;
  ancho: 40px;
  fondo:#f2f2f2;
  borde-radio:0px 40px 40px 0px;
  posición: absoluta; izquierda: 0; superior: 0;
  }

  #breadcrumb-isanchogives4 ul li:primer hijo a (
  borde-superior-izquierda-radio: 0px; borde-inferior-izquierda-radio: 0px;
  }

  #breadcrumb-isanchogives4 ul li:last-child a (
  relleno derecho: 80px;
  borde-superior-derecha-radio: 0px; borde-inferior-derecho-radio: 0px;
  }

  #breadcrumb-isanchogives4 ul li a:hover (
  fondo: #207ca8;
  }
  #breadcrumb-isanchogives4 ul li a.wesove-readcrum (
  fondo: #207ca8;
  }
  #breadcrumb-isanchogives4 ul li a:hover:después de (
  fondo: #207ca8;
  }
  #breadcrumb-isanchogives4 ul li a.wesove-readcrum:después (
  fondo: #207ca8;
  }

  
  En primer lugar, cree la estructura html basada en las etiquetas div y ul li. El div contiene una identificación, cada identificación contendrá un estilo diferente en la hoja de estilo para representar un diseño separado. Donde usamos numeración como uno, dos, tres, cuatro.

  Estos identificadores tienen la misma estructura interna, separados por diferentes estilos según su identificador.