BREADCRUMBMENU WITH HTML CSS

[{"selector":"#anim-8bd08646-0b37-49d6-9b8c-c9e8fdf3ab01","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-393ad407-0676-42c4-bf37-afddfb024e5c","keyframes":{"transform":["translate3d(0px, 136.61112%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f825265-b634-4f51-93a2-3cb5d151e81a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1b5d9fbc-549c-4ee7-b821-008341138e33","keyframes":{"transform":["translate3d(0px, -1312.06354%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-54b8eac9-ce83-49fc-be38-04098eb226ff","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0f5df087-cdb3-4c7d-b540-45116a9c53b6","keyframes":{"transform":["translate3d(0px, 294.07400%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] HTML JS (quick & simple example)

THE HTML

[{"selector":"#anim-3498cc11-0828-416c-abf3-d5780334660b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-654d548b-a781-458f-ad30-12613fcc698f","keyframes":{"transform":["translate3d(-117.20431%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0b744273-b957-4735-8c11-3c0c03b251b6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a7b65c63-2b3e-493c-81a0-829796062632","keyframes":{"transform":["translate3d(0px, 263.94345%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-37060bba-665e-413f-8417-c8ae2b18cbd9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-863de58e-e34e-4d94-9d52-5b9fdd02e615","keyframes":{"transform":["translate3d(130.46594%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] <ul class="breadcrumb"> <li><a href="http://site.com"> Home </a></li> <li><a href="http://site.com/shop/toys"> Toys </a></li> </ul> <li><a href="http://site.com/shop"> Shop </a></li>

THE CSS (A)

[{"selector":"#anim-8f404557-765d-4558-b0c9-e5d79f35e2ec","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bd2b15e0-ec5a-414e-a688-710fd4d12c7a","keyframes":{"transform":["translate3d(130.46594%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8cd2edef-8ab3-4187-8521-039a910a9031","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c8b64334-15bf-4377-a01d-7bd226413fd7","keyframes":{"transform":["translate3d(-116.84588%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] SIZING & FONT .breadcrumb, .breadcrumb * { font-family: arial, sans-serif; box-sizing: border-box; } LIST TO HORIZONTAL MENU .breadcrumb { display: flex; list-style: none; padding: 0; margin: 0; } .breadcrumb li { padding: 10px; }

THE CSS (B)

[{"selector":"#anim-fd3c65cd-1df8-424c-a46f-579aef89e956","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4fa00780-cd57-4bc4-bade-95867c619246","keyframes":{"transform":["translate3d(-117.20431%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b9dfde16-b6e6-488f-9780-18dbe957d6d1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-05dee201-cd50-4538-8857-0cb7f5d1f309","keyframes":{"transform":["translate3d(0px, 202.07883%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] MENU ITEMS .breadcrumb a { text-decoration: none; color: #288be1; font-weight: 700; } ARROW TRAIL .breadcrumb li::after { content: ">"; margin-left: 10px; } .breadcrumb li:last-child::after { content: none; }

VISIT & FOLLOW

[{"selector":"#anim-b154c79f-0fa9-4fe0-8756-46f6a79a7dd1","keyframes":{"opacity":[0,1]},"delay":2000,"duration":1000,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1411a297-f730-4442-8999-9abf62a90d7e","keyframes":{"opacity":[0,1]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6bc9c906-e68c-41aa-8683-73033baebb68","keyframes":{"transform":["translate3d(-128.43511%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2000,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4bbca942-ffb0-4ed4-aae4-70869c92f940","keyframes":{"opacity":[0,1]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ff049db3-6056-4dc8-8b2d-b45e72facc36","keyframes":{"transform":["translate3d(-151.73267%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2400,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-23575b67-1f71-4ea6-b7fc-0fc4a3c2ba11","keyframes":{"opacity":[0,1]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-65a9e6e1-373d-4865-a179-0556579098a0","keyframes":{"transform":["translate3d(-151.23154%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2600,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-49b81731-be41-47a7-b0b3-2b64a8e65268","keyframes":{"opacity":[0,1]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2186c6e5-5356-45cc-a56f-b5e3634a1810","keyframes":{"transform":["translate3d(-170.88234%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":2200,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-28d60390-6bd5-48d1-811f-960931721f3a [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(20.250939014149093%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}]

BREADCRUMBMENU WITH HTML CSS

THE HTML

01

THE CSS (A)

02

THE CSS (B)

03

VISIT & FOLLOW

CODE BOXX YOUTUBE

CODE BOXX PINTEREST

FULL TUTORIAL