{"id":383431,"date":"2026-09-25T15:41:18","date_gmt":"2026-09-25T15:41:18","guid":{"rendered":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/"},"modified":"2026-09-25T15:41:18","modified_gmt":"2026-09-25T15:41:18","slug":"breadcrumb-04","status":"publish","type":"portfolio","link":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/","title":{"rendered":"Breadcrumb V04"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\">[vc_row][vc_column][vc_column_text]<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-383430\" src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg\" alt=\"breadcrumb v04\" width=\"1200\" height=\"972\" srcset=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg 1200w, https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04-338x274.jpg 338w, https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04-1024x829.jpg 1024w, https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04-768x622.jpg 768w, https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04-353x286.jpg 353w, https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04-408x330.jpg 408w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/3&#8243;]<div class=\"vcex-heading vcex-heading-bottom-border-w-color vcex-module wpex-heading wpex-text-2xl wpex-border-b-2 wpex-border-solid wpex-border-main\"><span class=\"vcex-heading-inner wpex-inline-block wpex-relative wpex-pb-5 wpex-border-b-2 wpex-border-solid wpex-border-accent\">Template Details<\/span><\/div>[vc_column_text css=&#8221;.vc_custom_1606297364312{margin-top: 20px !important;}&#8221;]<strong>Author:<\/strong> Colorlib<\/p>\n<p><strong>Released:<\/strong> September 2026<\/p>\n<p><strong>License:<\/strong> <span class=\"cc-license-identifier\">CC BY 3.0<\/span>[\/vc_column_text][\/vc_column][vc_column width=&#8221;2\/3&#8243;]<div class=\"vcex-heading vcex-heading-bottom-border-w-color vcex-module wpex-heading wpex-text-2xl wpex-border-b-2 wpex-border-solid wpex-border-main\"><span class=\"vcex-heading-inner wpex-inline-block wpex-relative wpex-pb-5 wpex-border-b-2 wpex-border-solid wpex-border-accent\">Description<\/span><\/div>[vc_column_text css=&#8221;.vc_custom_1609251797520{margin-top: 20px !important;}&#8221;]A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in between into an ellipsis button. Pressing the button reveals the hidden levels in place and moves focus to the first of them. Without JavaScript the full path is shown.<\/p>\n<p>It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 6 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.<\/p>\n<ul>\n<li>Configurable number of levels kept at each end via data attributes<\/li>\n<li>Ellipsis button with a descriptive aria-label and tooltip of the hidden path<\/li>\n<li>Focus moves to the first revealed link<\/li>\n<li>Full trail as a no-JavaScript fallback<\/li>\n<li>CSS chevrons and reduced-motion friendly reveal<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/3&#8243;][vc_btn title=&#8221;Download&#8221; style=&#8221;flat&#8221; color=&#8221;green&#8221; i_icon_fontawesome=&#8221;&#8221; add_icon=&#8221;true&#8221; link=&#8221;url:https%3A%2F%2Fpreview.colorlib.com%2Fdownloads%2Ffree%2Fbreadcrumb-04.zip|title:Download%20this%20template|target:_blank|rel:nofollow noopener&#8221;][vc_btn title=&#8221;Preview&#8221; style=&#8221;flat&#8221; color=&#8221;purple&#8221; i_icon_fontawesome=&#8221;fa fa-solid fa-eye&#8221; add_icon=&#8221;true&#8221; css=&#8221;.vc_custom_1608469559733{margin-left: 10px !important;}&#8221; link=&#8221;url:https%3A%2F%2Fpreview.colorlib.com%2Ftheme%2Fbootstrap%2Fbreadcrumb-04%2F|target:_blank|rel:nofollow noopener&#8221;][\/vc_column][vc_column width=&#8221;2\/3&#8243;][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"<p>A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in between into an ellipsis button.<\/p>\n","protected":false},"author":697,"featured_media":383430,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"%%title%% - Free Bootstrap Breadcrumbs %%currentyear%% %%sep%% %%sitename%%","_yoast_wpseo_metadesc":"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.","footnotes":"","colorlib_dwn":""},"portfolio_tag":[62864,62865],"portfolio_category":[63468],"class_list":["type-portfolio","status-publish","hentry","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Breadcrumb V04 - Free Bootstrap Breadcrumbs 2026 - Colorlib<\/title>\n<meta name=\"description\" content=\"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Breadcrumb V04 - Free Bootstrap Breadcrumbs 2026 - Colorlib\" \/>\n<meta property=\"og:description\" content=\"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/\" \/>\n<meta property=\"og:site_name\" content=\"Colorlib\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/colorlib\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"972\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@colorlib\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/\",\"name\":\"Breadcrumb V04 - Free Bootstrap Breadcrumbs 2026 - Colorlib\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/breadcrumb-04.jpg\",\"datePublished\":\"2026-09-25T15:41:18+00:00\",\"description\":\"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/#primaryimage\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/breadcrumb-04.jpg\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/breadcrumb-04.jpg\",\"width\":1200,\"height\":972,\"caption\":\"Breadcrumb V04 free HTML and CSS snippet by Colorlib\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/template\\\/breadcrumb-04\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Breadcrumb V04\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"name\":\"Colorlib\",\"description\":\"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.\",\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\",\"name\":\"Colorlib\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"width\":800,\"height\":400,\"caption\":\"Colorlib\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/colorlib\",\"https:\\\/\\\/x.com\\\/colorlib\",\"https:\\\/\\\/www.instagram.com\\\/colorlib\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/colorlib\",\"https:\\\/\\\/youtube.com\\\/c\\\/Colorlib\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Breadcrumb V04 - Free Bootstrap Breadcrumbs 2026 - Colorlib","description":"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/","og_locale":"en_US","og_type":"article","og_title":"Breadcrumb V04 - Free Bootstrap Breadcrumbs 2026 - Colorlib","og_description":"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.","og_url":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/","og_site_name":"Colorlib","article_publisher":"https:\/\/www.facebook.com\/colorlib","og_image":[{"width":1200,"height":972,"url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@colorlib","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/","url":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/","name":"Breadcrumb V04 - Free Bootstrap Breadcrumbs 2026 - Colorlib","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/#primaryimage"},"image":{"@id":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg","datePublished":"2026-09-25T15:41:18+00:00","description":"A cloud-drive style breadcrumb that keeps the first level and the last two levels visible and folds the folders in... Free download, no jQuery or plugins.","breadcrumb":{"@id":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/#primaryimage","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/breadcrumb-04.jpg","width":1200,"height":972,"caption":"Breadcrumb V04 free HTML and CSS snippet by Colorlib"},{"@type":"BreadcrumbList","@id":"https:\/\/colorlib.com\/wp\/template\/breadcrumb-04\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colorlib.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Breadcrumb V04"}]},{"@type":"WebSite","@id":"https:\/\/colorlib.com\/wp\/#website","url":"https:\/\/colorlib.com\/wp\/","name":"Colorlib","description":"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.","publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colorlib.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/colorlib.com\/wp\/#organization","name":"Colorlib","url":"https:\/\/colorlib.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","width":800,"height":400,"caption":"Colorlib"},"image":{"@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/colorlib","https:\/\/x.com\/colorlib","https:\/\/www.instagram.com\/colorlib\/","https:\/\/www.linkedin.com\/company\/colorlib","https:\/\/youtube.com\/c\/Colorlib"]}]}},"_links":{"self":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/portfolio\/383431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/types\/portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/users\/697"}],"replies":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/comments?post=383431"}],"version-history":[{"count":0,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/portfolio\/383431\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media\/383430"}],"wp:attachment":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media?parent=383431"}],"wp:term":[{"taxonomy":"portfolio_tag","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/portfolio_tag?post=383431"},{"taxonomy":"portfolio_category","embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/portfolio_category?post=383431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}