In this tutorial, we are going to learn to make Breadcrumbs using HTML and CSS.
A breadcrumb or breadcrumb trail is a graphical control element used as a navigational aid in user interfaces and on web pages. It allows users to keep track and maintain awareness of their locations within programs, documents, or websites.
Source Code :
<style> ul.bread{ padding:10px 16px; list-style: none; background: #eee; } ul.bread li{ display: inline; font-size: 18px; } ul.bread li+li:before{ padding:8px; color:#000; content:"/\00a0"; } ul.bread li a{ color:#0275d8; text-decoration: none; } ul.bread li a:hover{ color:#01447e; text-decoration: underline; } </style> <h1 style="text-align: center;"> How to make a Breadcrumb using HTML and CSS</h1> <hr> <ul class="bread"> <li> <a href="#"> Home </a> </li> <li> <a href="#"> Settings </a> </li> <li> <a href="#"> Profile </a> </li> <li> Change Password </li> </ul>