Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
Bulma breadcrumb es un componente de navegación simple. Los divisores entre los enlaces de navegación se crean automáticamente cuando se agrega la clase ‘breadcrumb’ en la etiqueta de navegación. Indica la página actual usando el modificador ‘is-active’ en la etiqueta li.
Ejemplo 1:
<html>
<head>
<title>Bulma Breadcrumb</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
ul{
margin-top:24px
}
</style>
</head>
<body>
<div class='container'>
<div>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">
Technologies
</a>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: ruta de navegación de alineación diferente
<html>
<head>
<title>Bulma Breadcrumb</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.breadcrumb ul{
margin-top:24px;
}
li.is-active a{
color:white !important
}
</style>
</head>
<body>
<div>
<nav class="breadcrumb has-background-black"
aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">
Technologies
</a>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
<div>
<nav class="breadcrumb is-centered has-background-black"
aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">
Technologies
</a>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
<div>
<nav class="breadcrumb is-right has-background-black"
aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">
Technologies
</a>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
</body>
</html>
Producción:
Ejemplo 3: Pan rallado de diferentes tamaños
<html>
<head>
<title>Bulma Breadcrumb</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.breadcrumb ul{
margin-top:24px;
}
li.is-active a{
color:white !important
}
</style>
</head>
<body>
<div>
<nav class="breadcrumb is-small has-background-black"
aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">Technologies
</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
<div>
<nav class="breadcrumb is-medium has-background-black"
aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">
Technologies</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
<div>
<nav class="breadcrumb is-large has-background-black"
aria-label="breadcrumbs">
<ul>
<li><a href="#">Home</a></li>
<li class='is-active'>
<a href="#" aria-current="page">
Technologies</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</div>
</body>
</html>
Producción:
Ejemplo 4: Migas de pan con iconos
<html>
<head>
<title>Bulma Breadcrumb</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.breadcrumb ul{
margin-top:24px;
}
span{
margin-right:2px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div>
<nav class="breadcrumb aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>
<i class="fas fa-home"
aria-hidden="true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-music"
aria-hidden="true"></i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-video-slash"
aria-hidden="true"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a href="#">
<span>
<span>
<i class="fas fa-link"
aria-hidden="true"></i>
</span>
</span>
<span>Links</span>
</a>
</li>
<li class='is-active'>
<a href="#" aria-current="page">
<span>
<span>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
</span>
<span>Documentation</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
Producción:
Ejemplo 5: Diferentes separadores
<html>
<head>
<title>Bulma Breadcrumb</title>
<link rel='stylesheet'
href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- custom css -->
<style>
.breadcrumb ul{
margin-top:24px;
}
p{
margin-top:24px;
margin-left:15px;
}
span{
margin-right:2px;
}
</style>
</head>
<body>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<div class='columns'>
<div class='column is-3'>
<p><strong>Arrow Separator ---> </strong></p>
</div>
<div class='column is-8'>
<nav class="breadcrumb has-arrow-separator"
aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>
<i class="fas fa-home"
aria-hidden="true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-music"
aria-hidden="true"></i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-video-slash"
aria-hidden="true"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a href="#">
<span>
<span>
<i class="fas fa-link"
aria-hidden="true"></i>
</span>
</span>
<span>Links</span>
</a>
</li>
<li class='is-active'>
<a href="#" aria-current="page">
<span>
<span>
<i class="fas fa-book"
aria-hidden="true"></i>
</span>
</span>
<span>Documentation</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class='columns'>
<div class='column is-3'>
<p><strong>Bullet Separator ---> </strong></p>
</div>
<div class='column is-8'>
<nav class="breadcrumb has-bullet-separator"
aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>
<i class="fas fa-home" aria-hidden="true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-music"
aria-hidden="true"></i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-video-slash"
aria-hidden="true"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a href="#">
<span>
<span>
<i class="fas fa-link"
aria-hidden="true"></i>
</span>
</span>
<span>Links</span>
</a>
</li>
<li class='is-active'>
<a href="#" aria-current="page">
<span>
<span>
<i class="fas fa-book"
aria-hidden="true"></i>
</span>
</span>
<span>Documentation</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="columns">
<div class="column is-3">
<p><strong>Dot Separator ---> </strong></p>
</div>
<div class='column is-8'>
<nav class="breadcrumb has-dot-separator"
aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>
<i class="fas fa-home" aria-hidden="true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-music" aria-hidden="true"></i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-video-slash" aria-hidden="true"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a href="#">
<span>
<span>
<i class="fas fa-link" aria-hidden="true"></i>
</span>
</span>
<span>Links</span>
</a>
</li>
<li class='is-active'>
<a href="#" aria-current="page">
<span>
<span>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
</span>
<span>Documentation</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="columns">
<div class="column is-3">
<p><strong>Succeeds Separator ---> </strong></p>
</div>
<div class='column is-8'>
<nav class="breadcrumb has-succeeds-separator"
aria-label="breadcrumbs">
<ul>
<li>
<a href="#">
<span>
<i class="fas fa-home" aria-hidden="true"></i>
</span>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-music" aria-hidden="true"></i>
</span>
<span>Music</span>
</a>
</li>
<li>
<a href="#">
<span>
<i class="fas fa-video-slash" aria-hidden="true"></i>
</span>
<span>Videos</span>
</a>
</li>
<li>
<a href="#">
<span>
<span>
<i class="fas fa-link" aria-hidden="true"></i>
</span>
</span>
<span>Links</span>
</a>
</li>
<li class='is-active'>
<a href="#" aria-current="page">
<span>
<span>
<i class="fas fa-book" aria-hidden="true"></i>
</span>
</span>
<span>Documentation</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA