Custom Breadcrumb

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Custom Breadcrumb</title>
 <style>
 body {
 font-family: Arial, sans-serif;
 background-color: #f3f4f6;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 margin: 0;
 }
 .breadcrumb {
 display: flex;
 list-style: none;
 padding: 10px 20px;
 background-color: #fff;
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 border-radius: 5px;
 overflow: hidden;
 }
 .breadcrumb li {
 display: flex;
 align-items: center;
 position: relative;
 margin-right: 10px;
 }
 .breadcrumb li:not(:last-child):after {
 content: '>';
 margin-left: 10px;
 color: #ccc;
 font-size: 14px;
 }
 .breadcrumb li a {
 text-decoration: none;
 color: #333;
 font-weight: bold;
 display: flex;
 align-items: center;
 transition: color 0.3s;
 }
 .breadcrumb li a:hover {
 color: #007bff;
 }
 .breadcrumb li a .icon {
 margin-right: 5px;
 transition: transform 0.3s;
 }
 .breadcrumb li a:hover .icon {
 transform: scale(1.2);
 }
 .breadcrumb li a span {
 margin-left: 5px;
 font-size: 14px;
 }
 .breadcrumb li.active a {
 color: #555;
 pointer-events: none;
 cursor: default;
 }
 .breadcrumb li.active a:hover .icon {
 transform: none;
 }
 @keyframes bounce {
 0%, 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-10px);
 }
 }
 .breadcrumb li.active .icon {
 animation: bounce 1s infinite;
 }
 </style>
</head>
<body>
 <ul class="breadcrumb">
 <li><a href="#">🏠Home</a></li>
 <li><a href="#">📂Categories</a></li>
 <li><a href="#">📄Documents</a></li>
 <li class="active"><a href="#">📃Current Page</a></li>
 </ul>
 </body>
</html>

Custom Breadcrumb - VexaX