{"id":26389,"date":"2018-05-28T18:21:00","date_gmt":"2018-05-28T08:21:00","guid":{"rendered":"https:\/\/codemyui.com\/?p=26389"},"modified":"2018-05-28T14:30:07","modified_gmt":"2018-05-28T04:30:07","slug":"arrow-style-breadcrumb-navigation","status":"publish","type":"post","link":"https:\/\/codemyui.com\/arrow-style-breadcrumb-navigation\/","title":{"rendered":"Arrow Style Breadcrumb Navigation"},"content":{"rendered":"

HEre we can see the classic breadcrumb navigation element<\/a> with an arrow style background which helps users understand where they are on a website. This CSS only design<\/a> by created by Zywave Team<\/a>. <\/p>\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a><\/p>\n

Breadcrumb Navigation Snippet<\/h2>\n

\nSee the Pen [Prototype] Breadcrumbs by Zywave Team (@ZywaveTeam) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"

HEre we can see the classic breadcrumb navigation element with an arrow style background which helps users understand where they are on a website. This CSS only design by created by Zywave Team.<\/p>\nRead More<\/a>","protected":false},"author":1,"featured_media":26391,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[608602268,30305495],"class_list":["post-26389","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-breadcrumb","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Arrow-Style-Breadcrumb-Navigation.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":17941,"url":"https:\/\/codemyui.com\/various-breadcrumb-navigation-styles-css\/","url_meta":{"origin":26389,"position":0},"title":"Various Breadcrumb Navigation Styles with CSS","author":"Hima Vincent","date":"June 16, 2017","format":false,"excerpt":"Breadcrumb navigation helps reveals the user's location in a website or Web application and is great from a UX point of view. This CSS snippet by Stas Melnikov offers 7 styles for the breadcrumb navigation. If you are having trouble with the pen, try the archived copy on GitHub Breadcrumb\u2026","rel":"","context":"In \"breadcrumb\"","block_context":{"text":"breadcrumb","link":"https:\/\/codemyui.com\/tag\/breadcrumb\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Various-Breadcrumb-Navigation-Styles-with-CSS.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26382,"url":"https:\/\/codemyui.com\/round-expand-on-hover-breadcrumbs\/","url_meta":{"origin":26389,"position":1},"title":"Round Expand On Hover Breadcrumbs","author":"Saijo George","date":"May 28, 2018","format":false,"excerpt":"With this breadcrumb navigation, you will get a collapsed breadcrumb element and on hover, it expands to show you the lable for each item. It was designed by Renaud Tertrais. If you are having trouble with the pen, try the archived copy on GitHub Breadcrumbs Snippet","rel":"","context":"In \"breadcrumb\"","block_context":{"text":"breadcrumb","link":"https:\/\/codemyui.com\/tag\/breadcrumb\/"},"img":{"alt_text":"Round Expand On Hover Breadcrumbs","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Round-Expand-On-Hover-Breadcrumbs.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Round-Expand-On-Hover-Breadcrumbs.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Round-Expand-On-Hover-Breadcrumbs.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Round-Expand-On-Hover-Breadcrumbs.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26393,"url":"https:\/\/codemyui.com\/collapsed-to-reveal-full-breadcrumbs-on-hover\/","url_meta":{"origin":26389,"position":2},"title":"Collapsed to Reveal Full Breadcrumbs on Hover","author":"Saijo George","date":"May 28, 2018","format":false,"excerpt":"Personally, I am not a big fan of hiding the breadcrumb navigation like this but if you are really struggling to fit in the breadcrumb on the screen this might be something you are after. Only the 1st few characters of each breadcrumb element are shown by default and when\u2026","rel":"","context":"In \"breadcrumb\"","block_context":{"text":"breadcrumb","link":"https:\/\/codemyui.com\/tag\/breadcrumb\/"},"img":{"alt_text":"Collapsed to Reveal Full Breadcrumbs on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/05\/Collapsed-to-Reveal-Full-Breadcrumbs-on-Hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26702,"url":"https:\/\/codemyui.com\/css-only-responsive-navigation-menu\/","url_meta":{"origin":26389,"position":3},"title":"CSS Only Responsive Navigation Menu","author":"Saijo George","date":"July 18, 2018","format":false,"excerpt":"If you need a simple responsive CSS only navigation menu you will love this one by Mayur Suthar. On mobile, the menu turns into a hamburger menu and on clicking it the menu turns into a drop-down. If you are having trouble with the pen, try the archived copy on\u2026","rel":"","context":"In \"hamburger menu\"","block_context":{"text":"hamburger menu","link":"https:\/\/codemyui.com\/tag\/hamburger-menu\/"},"img":{"alt_text":"CSS Only Responsive Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/07\/CSS-Only-Responsive-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29251,"url":"https:\/\/codemyui.com\/css-only-content-slider\/","url_meta":{"origin":26389,"position":4},"title":"CSS Only Content Slider","author":"Saijo George","date":"January 15, 2020","format":false,"excerpt":"This is a content carousel in pure CSS, it has the left and right arrows to move between the various slides and a pagination style element below that you can use to jump to any specific slide. By Christian Schaefer. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"image slider\"","block_context":{"text":"image slider","link":"https:\/\/codemyui.com\/tag\/image-slider\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/CSS-Only-Content-Slider.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25139,"url":"https:\/\/codemyui.com\/pure-css-fullscreen-navigation-menu\/","url_meta":{"origin":26389,"position":5},"title":"Pure CSS Fullscreen Navigation Menu","author":"Saijo George","date":"November 20, 2017","format":false,"excerpt":"This hamburger menu designed by H\u00e5vard Brynjulfsen will expand into a full screen navigation menu on click. If you are having trouble with the pen, try the archived copy on GitHub Fullscreen Nav Menu Snippet","rel":"","context":"In \"full screen\"","block_context":{"text":"full screen","link":"https:\/\/codemyui.com\/tag\/full-screen\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-open-menu-effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26389","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=26389"}],"version-history":[{"count":2,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26389\/revisions"}],"predecessor-version":[{"id":26392,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/26389\/revisions\/26392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/26391"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=26389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=26389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=26389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}