Breadcrumbs 1

Customize this breadcrumbs components based on the number of navigation levels in your application.

{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"80d9d8b6-c3f5-2516-3045-0a0783b15909","type":"Block","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7e7"],"children":["97344061-7e8d-f889-b4f6-32ecd00a7757"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"97344061-7e8d-f889-b4f6-32ecd00a7757","type":"Block","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7e8"],"children":["83b10d17-fd20-cb54-59ef-a7ca7ec22fb0","77fc6726-7896-1c6b-1bb7-b95b71da936c","182a3402-50d0-e387-6c9b-adfc4a944df3","7105a691-c0b3-50c4-bd12-349fd773718e","9afdca40-6150-c3f1-318b-78e95f2168d4","1ef6798d-3675-7b30-8461-07a9be3a30a7","3c36f994-a89c-79e0-43f8-fe371976f438"],"data":{"text":false,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"83b10d17-fd20-cb54-59ef-a7ca7ec22fb0","type":"Block","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7e9","8d65e5e4-adfa-fdfc-ba2b-bff8793db7eb"],"children":["5c4082b5-dcf2-3672-d228-a6e6b83c0b01"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5c4082b5-dcf2-3672-d228-a6e6b83c0b01","text":true,"v":"Home"},{"_id":"77fc6726-7896-1c6b-1bb7-b95b71da936c","type":"HtmlEmbed","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7ea"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M10 7L14 12L10 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M10 7L14 12L10 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"182a3402-50d0-e387-6c9b-adfc4a944df3","type":"Link","tag":"a","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7e9"],"children":["edff4a40-932b-2e0e-001a-411830513a0a"],"data":{"button":false,"block":"","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"edff4a40-932b-2e0e-001a-411830513a0a","text":true,"v":"Level 1"},{"_id":"7105a691-c0b3-50c4-bd12-349fd773718e","type":"HtmlEmbed","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7ea"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M10 7L14 12L10 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M10 7L14 12L10 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"9afdca40-6150-c3f1-318b-78e95f2168d4","type":"Link","tag":"a","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7e9"],"children":["572c170d-6055-103f-8d36-191d83088b0c"],"data":{"button":false,"block":"","link":{"mode":"external","url":"#"},"attr":{"id":""},"devlink":{"runtimeProps":{},"slot":""},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"572c170d-6055-103f-8d36-191d83088b0c","text":true,"v":"Level 2"},{"_id":"1ef6798d-3675-7b30-8461-07a9be3a30a7","type":"HtmlEmbed","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7ea"],"children":[],"v":"<svg width=\"auto\" height=\"auto\" viewbox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M10 7L14 12L10 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","data":{"search":{"exclude":true},"embed":{"meta":{"html":"<svg width=\"auto\" height=\"auto\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n\t<path d=\"M10 7L14 12L10 17\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>","div":false,"script":false,"compilable":false,"iframe":false},"type":"html"},"insideRTE":false,"devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"3c36f994-a89c-79e0-43f8-fe371976f438","type":"Block","tag":"div","classes":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7e9","8d65e5e4-adfa-fdfc-ba2b-bff8793db7ec"],"children":["7711a183-3a0a-d1bb-92fa-ff9949e6cc9b"],"data":{"text":true,"tag":"div","devlink":{"runtimeProps":{},"slot":""},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7711a183-3a0a-d1bb-92fa-ff9949e6cc9b","text":true,"v":"Current page"}],"styles":[{"_id":"8d65e5e4-adfa-fdfc-ba2b-bff8793db7e7","fake":false,"type":"class","name":"breadcrumbs-1","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"8d65e5e4-adfa-fdfc-ba2b-bff8793db7e8","fake":false,"type":"class","name":"breadcrumbs-1_container","namespace":"","comb":"","styleLess":"display: flex; justify-content: flex-start; align-items: center; grid-column-gap: 0.25rem;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"8d65e5e4-adfa-fdfc-ba2b-bff8793db7e9","fake":false,"type":"class","name":"breadcrumbs-1_item","namespace":"","comb":"","styleLess":"color: #0c60f5; font-size: 1rem; line-height: 1.2em; font-weight: 700;","variants":{},"children":["8d65e5e4-adfa-fdfc-ba2b-bff8793db7eb","8d65e5e4-adfa-fdfc-ba2b-bff8793db7ec"],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"8d65e5e4-adfa-fdfc-ba2b-bff8793db7eb","fake":false,"type":"class","name":"is-home","namespace":"","comb":"&","styleLess":"color: #0f1929;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"8d65e5e4-adfa-fdfc-ba2b-bff8793db7ea","fake":false,"type":"class","name":"breadcrumbs-1_icon","namespace":"","comb":"","styleLess":"width: 1rem; height: 1rem; color: #7587a5;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null},{"_id":"8d65e5e4-adfa-fdfc-ba2b-bff8793db7ec","fake":false,"type":"class","name":"is-current-page","namespace":"","comb":"&","styleLess":"color: #3b4961; font-weight: 400; text-decoration: none;","variants":{},"children":[],"createdBy":"5fcce66bbffdd37054e18b58","origin":null,"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0,"universalBindingsRemovedCount":0,"unlinkedSymbolCount":0}}
Built by hand with
from
Piixel Media