Global Output Tags

• Output Tags Overview
• URL Output Tag
• SEO Output Tags
• Scroll Link
• Name Output Tag
• Link Output Tag
• Include JS
• Include CSS
• Header Output Tags
• GET Output Tags
• Faceted Navigation
• Customer Output Tags
• Cart Output Tags
• Business Output Tags
• Breadcrumb
• Asset URL

FLEX Documentation

• Introduction
• Code Overview
• Back Office
• Loops
• Global Output Tags
• Files
• AJAX
• Navigation
• Products
• Categories
• Pages
• Pagination
• Forms
• Checkout
• Search

A breadcrumb (or breadcrumb trail) helps show the user a navigation path to how they got to viewing the page. For example, if they are on a product page viewing your product "Basic T-Shirt", the may of clicked on Clothing > Mens > Tops > T-shirt > Basic T-Shirt. This will then show the category this T-Shirt is tied to.

To implement the breadcrumb,

{breadcrumb}
<!-- output -->
<ul class="breadcrumb">
   <li id="breadcrumb_element_0" class="breadcrumb_element breadcrumb_element_home breadcrumb_element_even"><a class="alink breadcrumb-link" href="/" target="_self">Home</a></li>
   <li id="breadcrumb_delimiter_0" class="breadcrumb_element_home breadcrumb_delimiter">›</li>
   <li id="breadcrumb_element_1" class="breadcrumb_element breadcrumb_element_category breadcrumb_element_odd"><a class="alink breadcrumb-link" href="/products/" target="_self">Products</a></li>
   <li id="breadcrumb_delimiter_1" class="breadcrumb_delimiter">›</li>
   <li id="breadcrumb_element_2" class="breadcrumb_element breadcrumb_element_category breadcrumb_element_subcategory breadcrumb_element_even"><a class="alink breadcrumb-link" href="/products/mens/" target="_self">Men</a></li>
   <li id="breadcrumb_delimiter_2" class="breadcrumb_delimiter">›</li>
   <li id="breadcrumb_element_3" class="breadcrumb_element breadcrumb_element_category breadcrumb_element_subcategory breadcrumb_element_odd"><a class="alink breadcrumb-link" href="/products/mens/shirts/" target="_self">Shirts</a></li>
   <li id="breadcrumb_delimiter_3" class="breadcrumb_delimiter">›</li>
   <li id="breadcrumb_element_4" class="breadcrumb_element breadcrumb_element_product breadcrumb_element_even"><span>Basic T-Shirt</span></li>
</ul>

As you can see above, the output tag breadcrumb will create a working breadcrumb for a product page. This output tag will work on any page except for the Home Page. That means any content, product, category or subcategory page

Note:It is common to have a breadcrumb on a content template page such as a Blog. Lead Commerce does not have a concept of hierarchy on our content template pages. So if you wanted to have a breadcrumb on your blog that links back to your blog rollup page, it would be best to use the link output tag instead of breadcrumb. Breadcrumb truly works best on category, subcategory or product pages.

If you want to hide the homepage link or even use different text on the breadcrumb for the homepage, target the particuar css you want and hide "breadcrumb_element_home" then use the link output tag or your own custom html to link back to your homepage. CSS will be very helpful to style your breadcrumb.