Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Breadcrumbs with CSS Custom Properties as API
<div class="page">
<div class="page__demo">
<div class="main-container page__container">
<div class="page__section">
<ul class="breadcrumbs">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
<div class="page__section">
<ul class="breadcrumbs breadcrumbs_type1">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
<div class="page__section">
<ul class="breadcrumbs breadcrumbs_type2">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
<div class="page__section">
<ul class="breadcrumbs breadcrumbs_type3">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
<div class="page__section">
<ul class="breadcrumbs breadcrumbs_type4">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
<div class="page__section">
<ul class="breadcrumbs breadcrumbs_type5">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
<div class="page__section">
<ul class="breadcrumbs breadcrumbs_type6">
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Home</a></li>
<li class="breadcrumbs__item"><a href="#0" class="breadcrumbs__element">Blog</a></li>
<li class="breadcrumbs__item breadcrumbs__item_active"><span class="breadcrumbs__element">Single post</span></li>
</ul>
</div>
</div>
</div>
<footer class="footer">
<div class="main-container footer__container">
<span>Liked? Please,
<a href="https://stas-melnikov.ru/donate/" rel="noopener noreferrer" target="_blank">look the page</a>
</span>
<a href="https://stas-melnikov.ru" class="melnik909" rel="noopener noreferrer" target="_blank">Developed by Stas Melnikov</a>
</div>
</footer>
</div>
.breadcrumbs{
--cssuiBreadcrumbsTextColor: var(--breadcrumbsTextColor);
--cssuiBreadcrumbsTextColorActive: var(--breadcrumbsTextColorActive);
--cssuiBreadcrumbsDivider: var(--breadcrumbsDivider);
--cssuiBreadcrumbsDividerColor: var(--breadcrumbsDividerColor, inherit);
--cssuiBreadcrumbsDividerSize: var(--breadcrumbsDividerSize, 16px);
--cssuiBreadcrumbsIndent: var(--breadcrumbsIndent, 8px);
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
}
.breadcrumbs__item{
display: inline-block;
position: relative;
padding-right: calc(var(--cssuiBreadcrumbsDividerSize) + var(--cssuiBreadcrumbsIndent));
margin-right: var(--cssuiBreadcrumbsIndent);
color: var(--cssuiBreadcrumbsTextColor);
}
.breadcrumbs__item:after{
content: var(--cssuiBreadcrumbsDivider);
width: var(--cssuiBreadcrumbsDividerSize);
height: var(--cssuiBreadcrumbsDividerSize);
line-height: 1;
text-align: center;
font-family: "Arial";
font-size: var(--cssuiBreadcrumbsDividerSize);
color: var(--cssuiBreadcrumbsDividerColor);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.breadcrumbs__item_active{
margin-right: 0;
padding-right: 0;
color: var(--cssuiBreadcrumbsTextColorActive);
}
.breadcrumbs__item_active:after{
display: none;
}
.breadcrumbs__element{
color: inherit;
}
/* examples */
.breadcrumbs{
--breadcrumbsTextColor: #D1C4E9;
--breadcrumbsTextColorActive: #fff;
}
.breadcrumbs_type1{
--breadcrumbsDivider: "/";
}
.breadcrumbs_type1 .breadcrumbs__item:after{
margin-top: 2px;
}
.breadcrumbs_type2{
--breadcrumbsDivider: "→";
--breadcrumbsDividerSize: 20px;
}
.breadcrumbs_type3{
--breadcrumbsDivider: "•";
--breadcrumbsDividerSize: 2rem;
}
.breadcrumbs_type3 .breadcrumbs__item:after{
margin-top: 2px;
}
.breadcrumbs_type4{
--breadcrumbsDivider: "|";
--breadcrumbsDividerSize: 14px;
}
.breadcrumbs_type5{
--breadcrumbsDivider: "›";
--breadcrumbsDividerSize: 20px;
}
.breadcrumbs_type6{
--breadcrumbsDivider: "—";
--breadcrumbsDividerSize: 14px;
}
/*
* demo page
*/
@media screen and (min-width: 768px){
html{
font-size: 62.5%;
}
}
@media screen and (max-width: 767px){
html{
font-size: 50%;
}
}
body{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Open Sans", "Ubuntu", "Fira Sans", "Helvetica Neue", sans-serif;
font-size: 1.6rem;
color: #fff;
background-color: #673AB7;
margin: 0;
-webkit-overflow-scrolling: touch;
}
a{
text-decoration: none;
color: #D1C4E9;
}
a:hover, a:focus{
text-decoration: underline;
}
.title{
margin-top: 0;
margin-bottom: 2rem;
}
.page{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.page__demo{
flex-grow: 2;
padding-bottom: 5rem;
}
.main-container{
padding-left: 1rem;
padding-right: 1rem;
margin-left: auto;
margin-right: auto;
}
.page__container{
max-width: 600px;
}
.page__section{
margin-top: 5rem;
padding: 2rem 3rem;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
background-color: #512DA8;
color: #fff;
border-radius: 2px;
}
.footer{
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-size: 1.4rem;
}
@media screen and (min-width: 641px){
.footer__container{
display: flex;
justify-content: space-between;
max-width: 1200px;
}
.melnik909{
margin-left: 2rem;
}
}
@media screen and (max-width: 640px){
.melnik909{
display: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment