Trang chá»§
Breadcrumb
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<div class="bc"> <ul class="bl"> <li class="bi"> <a href="#" class="lk"> <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 576 512"> <path d="M543.8 287.6c17 0 32-14 32-32.1c1-9-3-17-11-24L512 185V64c0-17.7-14.3-32-32-32H448c-17.7 0-32 14.3-32 32v36.7L309.5 7c-6-5-14-7-21-7s-15 1-22 8L10 231.5c-7 7-10 15-10 24c0 18 14 32.1 32 32.1h32v69.7c-.1 .9-.1 1.8-.1 2.8V472c0 22.1 17.9 40 40 40h16c1.2 0 2.4-.1 3.6-.2c1.5 .1 3 .2 4.5 .2H160h24c22.1 0 40-17.9 40-40V448 384c0-17.7 14.3-32 32-32h64c17.7 0 32 14.3 32 32v64 24c0 22.1 17.9 40 40 40h24 32.5c1.4 0 2.8 0 4.2-.1c1.1 .1 2.2 .1 3.3 .1h16c22.1 0 40-17.9 40-40V455.8c.3-2.6 .5-5.3 .5-8.1l-.7-160.2h32z"></path> </svg> Home </a> </li> <li class="bi"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <path fill="currentColor" fill-rule="evenodd" d="M9.793 7.793a1 1 0 000 1.414L12.586 12l-2.793 2.793a1 1 0 101.414 1.414l3.5-3.5a1 1 0 000-1.414l-3.5-3.5a1 1 0 00-1.414 0z" clip-rule="evenodd"></path> </svg> <a href="#" class="lk">template</a> </li> <li class="bi"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <path fill="currentColor" fill-rule="evenodd" d="M9.793 7.793a1 1 0 000 1.414L12.586 12l-2.793 2.793a1 1 0 101.414 1.414l3.5-3.5a1 1 0 000-1.414l-3.5-3.5a1 1 0 00-1.414 0z" clip-rule="evenodd"></path> </svg> <a href="#" class="lk">Fast UI</a> </li> </ul> </div>
CSS
Copy
.bc .bl, .bc .bi, .bc .lk { display: flex; align-items: center; gap: 8px; color: #374151; } .bc .bl { gap: 12px; } .bc .bi svg { height: 20px; } .bc .bi:last-child { cursor: text; } .bc .bi:last-child .lk { pointer-events: none; color: #9ca3af; } .bc .lk { font-size: 14px; font-weight: 500; transition: .2s linear; text-transform: capitalize; } .bc .lk svg { height: 16px; } .bc .lk:hover { color: #e11d48; }
JS
Copy