Sitefinity CMS

Style the Breadcrumb Control Send comments on this topic.
How-to > Pages > Navigation > Style the Breadcrumb Control

Glossary Item Box

Sitefinity Breadcrumb control inherits from ASP.NET SiteMapPath. The control available in Sitefinity only overrides the InitializeItem method in order to handle URL resolving. Another extension of the control is to support external templates although the templates are not modified and all the rendering is done by the SiteMapPath control. Thus, declaring templates for Breadcrumb is identical to doing that for SiteMapPath.

 

For more information look at MSDN articles about  SiteMapPath.

 

This topic shows how to set styles of the Breadcrumb control.

Solution One

Open the page you would like to use the Breadcrumb control in. Change to Edit mode. Add a Breadcrumb control. Set the NodeStyle property of the Breadcrumb control:

  1. Click Edit of the control.
  2. In Styles section, click Edit for the NodeStyle property. (See Figure 1)How to Style the Breadcrumb Control - NodeStyle Property   

    Figure 1

  3.  In the Appearance section, click Edit for the Font property. (See Figure 2) How to Style the Breadcrumb Control - Font Property

    Figure 2

  4.  Select True for the Underline property. (See Figure 3) How to Style the Breadcrumb Control - Underline Property  

    Figure 3

 

Solution Two

Another solution is to create your own template for the Breadcrumb node and set its path to NodeTemplateUrl property of the Appearance section of Breadcrumb properties.