Custom Breadcrumb - VexaX
Run Code
Toggle Theme
Share Link
<!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="#"><i class="icon">🏠</i><span>Home</span></a></li> <li><a href="#"><i class="icon">📂</i><span>Categories</span></a></li> <li><a href="#"><i class="icon">📄</i><span>Documents</span></a></li> <li class="active"><a href="#"><i class="icon">📃</i><span>Current Page</span></a></li> </ul> </body> </html>