{"id":410,"date":"2017-02-19T04:51:23","date_gmt":"2017-02-19T04:51:23","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=410"},"modified":"2025-10-21T12:18:41","modified_gmt":"2025-10-21T10:18:41","slug":"breadcrumbs","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/breadcrumbs\/","title":{"rendered":"Breadcrumbs"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-bfc6q-25e2037bf95c13de7349a3d3279b788a\">\n#top .av-special-heading.av-bfc6q-25e2037bf95c13de7349a3d3279b788a{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-bfc6q-25e2037bf95c13de7349a3d3279b788a .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-bfc6q-25e2037bf95c13de7349a3d3279b788a .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-bfc6q-25e2037bf95c13de7349a3d3279b788a av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Breadcrumbs<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-350bf6-b3df6273497657949970684d749163cd hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2yo122-461230bec9f4df66aee5e629a07664c6 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-19j7e-8a9adf5f6ec9f0bdd4917dba96919e38 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Breadcrumbs help show the navigational path on the website\u00a0and it is easy for users to know where they are on the website. Breadcrumbs can be activated for selected pages from <strong>Page\/Post &gt; Layout &gt; Title Bar Settings<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7387\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings.png\" alt=\"\" width=\"387\" height=\"749\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings.png 387w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-155x300.png 155w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-364x705.png 364w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/p>\n<p>Enable breadcrumbs sitewide from <strong>Enfold &gt; Header &gt; Header Title and Breadcrumbs<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7388\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2.png\" alt=\"\" width=\"997\" height=\"705\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2.png 997w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2-300x212.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2-768x543.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2-260x185.png 260w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2-705x499.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Settings-2-450x318.png 450w\" sizes=\"auto, (max-width: 997px) 100vw, 997px\" \/><\/p>\n<\/div><\/section>\n<div  class='hr av-2i4s1m-c35ff06a1f24e3be58d0a30a107b3355 hr-default  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8n8si-a989e3301b1836af39e69c697ffb9445 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Insert Breadcrumbs as Shortcodes<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-2agvy2-63e9455dd8e4a278b782bcbfba6c1fd1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Please go to Appearance &gt; Editor and open\u00a0<strong>functions.php<\/strong>\u00a0file and add the following code at the bottom of the page:<\/p>\n<pre><code>\r\nfunction av_breadcrumbs_shortcode( $atts ) {\r\n\treturn Avia_Breadcrumb_Trail()-&gt;get_trail( array( 'separator' =&gt; '\/', 'richsnippet' =&gt; true, 'trail_end' =&gt; '' ) );\r\n}\r\nadd_shortcode( 'av_breadcrumbs', 'av_breadcrumbs_shortcode' );\r\n<\/code><\/pre>\n<p>Then add breadcrumbs using following shortcode<\/p>\n<pre><code>\r\n[av_breadcrumbs]\r\n<\/code><\/pre>\n<\/div><\/section>\n<div  class='hr av-23psei-a4212808aa7a09bf08b24d7dd73ee50f hr-default  avia-builder-el-7  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1z99uq-bf4d256d026521a564e83382eb196a70 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Display breadcrumbs under page title<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-8p70a-f32481db19db32cde9dd58a57c69cb09 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To move the breadcrumbs below the page title please use the below CSS code.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-7386\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title-1030x196.png\" alt=\"\" width=\"1030\" height=\"196\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title-1030x196.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title-300x57.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title-768x146.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title-705x134.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title-450x86.png 450w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2017\/02\/Breadcumbs-under-title.png 1155w\" sizes=\"auto, (max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<pre> \/* Breadcrumbs below page title *\/\r\n.title_container .breadcrumb { \r\n     position:relative;\r\n     left:-2px; \r\n     top: 5px; \r\n}\r\n.title_container { \r\n     padding-bottom:10px;\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-1lw8q2-6f5039f376cfc129eefb7165432d7fea hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1ct7kq-91f590a1f937d2bdc96b26a41288094a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Hide breadcrumbs on mobile phone<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-18tjia-32ab2185222a64d655e4e99d0c38547b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To hide the breadcrumbs on mobile please use the below CSS<\/p>\n<pre> \/* Hide breadcrumbs on mobile*\/\r\n@media only screen and (max-width:767px) {\r\n\t.title_container .breadcrumb {\r\n\t\tdisplay:none;\r\n\t}\r\n}\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-12jkh6-106e4c6c62d72e220901548736f310f9 hr-default  avia-builder-el-13  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-zllnu-a67652fec736da4dd96107c5ec6c3507 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Styling Breadcrumbs<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-r42fm-844c62c34b79355f7a43272bd48115bb '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Add custom color to breadcrumbs using the CSS below.<\/p>\n<pre> \/* Breadcrumbs style*\/\r\n\r\n\/* Title container background color *\/\r\n.title_container { background-color: red!important; }\r\n\r\n\/* Title color *\/\r\n#top .alternate_color.title_container .main-title a { color: white; }\r\n\r\n\/* Breadcrumb link color *\/\r\n.breadcrumb-trail * { color: gold!important; }\r\n\r\n<\/pre>\n<\/div><\/section>\n<div  class='hr av-lj0s2-6dc8c6cdd7eab4fb48bcf3549526b78b hr-default  avia-builder-el-16  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-cy3my-7e429d8fdbf6882600405496a464577f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Breadcrumbs \u2013 remove the words you are here.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-amfai-929aa83646f1fcbe474a750f3180be93 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To remove the words &#8220;You are here&#8221; please use the CSS below.<\/p>\n<pre> \/* Remove you are here *\/ \r\nspan.trail-before {\r\ndisplay: none!important;\r\n}\r\n<\/pre>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,12],"tags":[18],"class_list":["post-410","post","type-post","status-publish","format-standard","hentry","category-documentation","category-explore","tag-enfold-xtra","documentation","explore"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=410"}],"version-history":[{"count":5,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/410\/revisions"}],"predecessor-version":[{"id":13961,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/410\/revisions\/13961"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}