Modern Gradient Breadcrumb - MeggiTools
Run
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>Modern Gradient Breadcrumb</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .breadcrumb { display: flex; list-style: none; padding: 10px 20px; background: linear-gradient(90deg, #ff7e5f, #feb47b); border-radius: 5px; overflow: hidden; } .breadcrumb li { display: flex; align-items: center; position: relative; margin-right: 10px; color: white; } .breadcrumb li:not(:last-child):after { content: '>'; margin-left: 10px; color: white; font-size: 14px; } .breadcrumb li a { text-decoration: none; color: white; font-weight: bold; display: flex; align-items: center; transition: color 0.3s; } .breadcrumb li a:hover { color: #333; } .breadcrumb li a .icon { margin-right: 5px; } </style> </head> <body> <ul class="breadcrumb"> <li><a href="#"><i class="icon">🏠</i><span>Dashboard</span></a></li> <li><a href="#"><i class="icon">📁</i><span>Projects</span></a></li> <li><a href="#"><i class="icon">📝</i><span>Reports</span></a></li> <li class="active"><a href="#"><i class="icon">📊</i><span>Statistics</span></a></li> </ul> </body> </html>