HTML JS

HOW TO CREATE A BREADCRUMBMENU WITH HTML CSS

<ul class="breadcrumb">   <li><a href="http://site.com">     Home   </a></li>

THE HTML

01

  <li><a href="http://site.com/shop/toys">     Toys   </a></li> </ul>

  <li><a href="http://site.com/shop">     Shop   </a></li>

SIZING & FONT  .breadcrumb, .breadcrumb * {   font-family: arial, sans-serif;   box-sizing: border-box;  }

THE CSS (A)

02

LIST TO HORIZONTAL MENU .breadcrumb {   display: flex; list-style: none;   padding: 0; margin: 0; } .breadcrumb li { padding: 10px; }

MENU ITEMS .breadcrumb a {   text-decoration: none;   color: #288be1; font-weight: 700; }

THE CSS (B)

03

ARROW TRAIL .breadcrumb li::after {   content: ">";  margin-left: 10px; } .breadcrumb li:last-child::after { content: none; }