change output format (slightly!) of breadcrumb widget - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

change output format (slightly!) of breadcrumb widget

  • change output format (slightly!) of breadcrumb widget
  • Hi, by default the breadcrumb widget displays the label text as a span, then the actual location in a div below. ie,

    You are here:

    Is there a simple way to have everything on the same line please? ie,
    You are here: Home

    Any help appreciated!


    Hello Tom,

    By default, when you enter a text for the label (e.g. You are here: ) the breadcrumb widget displays the text on the same line just before the breadcrumb. Please refer to the attached video demonstrating this.

    You may have some custom css styles which are overriding the default styles and this changing the look of the widget on your side. You may refer to the following article where you can find a list of the css classes applied to the breadcrumb widget and apply your custom styles in order to achieve the desired look and style.

    Sabrie Nedzhip
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Sitefinity CMS Ideas&Feedback Portal and vote to affect the priority of the items
  • My mistake - thanks for the help.
  • Just incase this helps anyone else - it turns out this was a Sitefinity issue.

    If you create a Sitefinity project using the default theme then your label, say "You are here:" is on the same line as the rest of the breadcrumb. No arguments there.

    But if you create a new Sitefinity theme in Visual Studio / Sitefinity Thunder, even if you do not add any CSS of your own the new theme will put them on separate lines.

    It turns out a new, unchanged, theme created in Visual Studio / Sitefinity Thunder does not match the Sitefinity default theme exactly. In this case it is missing the display:inline-block;

    .sfBreadcrumbWrp .RadSiteMap, .sfBreadcrumbWrp .RadSiteMap .rsmLevel
    display: inline-block;
    zoom: 1;
    vertical-align: top;