5 breadcrumb list designs created with HTML/CSS
Breadcrumbs are important for both usability and SEO. The larger the site, the greater the benefits of installation. On this page, we have compiled snippets that you can use to incorporate such breadcrumbs just by copying and pasting them.
Simple breadcrumb
Arrow
Adjust design
A simple breadcrumb trail. You can optionally choose whether or not to include the "Home" icon. It is also a good idea to add a hover animation to make the link easier to understand.
Copy HTML
<ol class="breadcrumb-001">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
Copy CSS
.breadcrumb-001 {
display: flex;
gap: 0 22px;
list-style: none;
padding: 0;
font-size: .9em;
}
.breadcrumb-001 li {
display: flex;
align-items: center;
}
.breadcrumb-001 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
}
.breadcrumb-001 li:not(:last-child)::after {
display: inline-block;
transform: rotate(45deg);
width: .3em;
height: .3em;
margin-left: 10px;
border-top: 1px solid #333333;
border-right: 1px solid #333333;
content: '';
}
.breadcrumb-001 a {
color: #333333;
text-decoration: none;
}
Arrow（fill）
Adjust design
I tried filling in the arrow. Recommended if you want to look more compact.
Copy HTML
<ol class="breadcrumb-005">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
Copy CSS
.breadcrumb-005 {
display: flex;
gap: 0 20px;
list-style: none;
padding: 0;
font-size: .9em;
}
.breadcrumb-005 li {
display: flex;
align-items: center;
}
.breadcrumb-005 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
}
.breadcrumb-005 li:not(:last-child)::after {
display: inline-block;
width: .3em;
height: .6em;
margin-left: 12px;
background-color: #333333;
clip-path: polygon(0 0, 100% 50%, 0 100%);
content: '';
}
.breadcrumb-005 a {
color: #333333;
text-decoration: none;
}
Slash
Adjust design
I tried using a slash as the delimiter. Since the character "/" is specified as is, the implementation is slightly simpler than the arrow.
Copy HTML
<ol class="breadcrumb-002">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
Copy CSS
.breadcrumb-002 {
display: flex;
gap: 0 15px;
list-style: none;
padding: 0;
font-size: .9em;
}
.breadcrumb-002 li {
display: flex;
align-items: center;
}
.breadcrumb-002 li:first-child::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
content: '';
}
.breadcrumb-002 li:not(:last-child)::after {
display: inline-block;
margin-left: 15px;
color: #333333;
content: '/';
}
.breadcrumb-002 a {
color: #333333;
text-decoration: none;
}
Arrow breadcrumb
Gray background
Adjust design
Breadcrumbs with arrows like a dashboard. Recommended for sites with white and black theme colors.
Copy HTML
<ol class="breadcrumb-003">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
Copy CSS
.breadcrumb-003 {
display: flex;
gap: 0 20px;
list-style: none;
padding: 6px 0 6px 18px;
border-radius: 3px;
overflow: hidden;
background-color: #f2f2f2;
font-size: .9em;
}
.breadcrumb-003 li {
display: flex;
align-items: center;
position: relative;
padding-right: 20px;
}
.breadcrumb-003 li:first-child a::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23333333'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
vertical-align: text-bottom;
content: '';
}
.breadcrumb-003 li:not(:last-child)::before,
.breadcrumb-003 li:not(:last-child)::after{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
content:'';
}
.breadcrumb-003 li:not(:last-child)::before{
right: 0;
border-left: 10px solid #c6cdd3;
}
.breadcrumb-003 li:not(:last-child)::after{
right: 1px;
border-left: 10px solid #f2f2f2;
}
.breadcrumb-003 a {
color: #333333;
text-decoration: none;
}
Colorful background
Adjust design
A breadcrumb list with a single color background to make the arrows more noticeable. Since the font color is white, it is recommended that the background be a color with strong contrast.。
Copy HTML
<ol class="breadcrumb-004">
<li><a href="#">ホーム</a></li>
<li><a href="#">カテゴリー</a></li>
<li><a href="#">タイトル</a></li>
</ol>
Copy CSS
.breadcrumb-004 {
display: flex;
gap: 0 20px;
list-style: none;
padding: 6px 0 6px 18px;
border-radius: 3px;
overflow: hidden;
background-color: #2589d0;
font-size: .9em;
}
.breadcrumb-004 li {
display: flex;
align-items: center;
position: relative;
padding-right: 20px;
}
.breadcrumb-004 li:first-child a::before {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 4px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 20C20 20.5523 19.5523 21 19 21H5C4.44772 21 4 20.5523 4 20V11L1 11L11.3273 1.6115C11.7087 1.26475 12.2913 1.26475 12.6727 1.6115L23 11L20 11V20ZM11 13V19H13V13H11Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
vertical-align: text-bottom;
content: '';
}
.breadcrumb-004 li:not(:last-child)::before,
.breadcrumb-004 li:not(:last-child)::after{
position: absolute;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
content:'';
}
.breadcrumb-004 li:not(:last-child)::before{
right: 0;
border-left: 10px solid #fff;
}
.breadcrumb-004 li:not(:last-child)::after{
right: 2px;
border-left: 10px solid #2589d0;
}
.breadcrumb-004 a {
color: #fff;
text-decoration: none;
}