Produto
PRODUTO
Breadcrumb
Breadcrumbs permitem aos usuários identificar a sua localização dentro de um determinado fluxo de páginas, bem como navegar entre os diferentes níveis desse fluxo.
Estados de interação
Normal
Hover
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="breadcrumb">
<ul>
<li><a href="#" class="">Home</a></li>
<li><a href="#" class="active">Física</a></li>
</ul>
</div>
SASS Exibir código
Copiar código
Exibir código
.breadcrumb{
background-color: #ffffff;
box-shadow: inset 0 -1px 0 0 #f1f1f1;
ul{
list-style: none;
margin: 0;
padding: 0 20px;
line-height: 40px;
li{
display: inline-block;
&:not(:first-child){
&:before{
content: "";
display: inline-flex;
background-image: url(/img/chevron-right.png);
background-size: 16px;
background-repeat: no-repeat;
width: 16px;
height: 16px;
position: relative;
margin: 0 10px;
top: 5px;
}
}
a{
font-family: Lato;
font-size: 0.75em;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.5;
letter-spacing: normal;
color: #323232;
&.active{
font-weight: bold;
line-height: 1.5;
letter-spacing: normal;
color: #323232;
}
&.hovered{
text-decoration: underline;
}
}
}
}
}