Breadcrumbs

If this is your first time to hear about the term "breadcrumb" used in web design, let me show you what it looks like:

I'm pretty sure you've encountered it in the websites you've visited. Now, let's add one on your website. To add the breadcrumb element, simply search for "breadcrumb" on the elements panel and drag the Breadcrumb element to the content pane.

You'll be able to see something like this:

Now, the text you are seeing in the builder or in Cornerstone is not the actual text that will appear on the front-end of your site. That's merely a placeholder. On the front-end, you'll see the hierarchy of the webpages starting with the link to the Home on the left-most part, then moving one child further on the right.

In this case, since the page we are creating is the Company Profile, which in this example is a child of the About Us page, the structure is: Home > About Us > Company Profile.

Breadcrumbs Setup

Under the Setup field group, you'll see the following fields:

Home Label Type

You can choose whether to use a plain text (e.g. Home) for the homepage link or to use an icon instead.

Home Label

If you selected Text on the Home Label Type field above, you can change the text from saying "Home" to something else (e.g. Blog, News).

If you chose Icon, you'll be given the option to choose the icon to use.

Width & Max Width

You can set the default width of the Breadcrumb element. You can also set its maximum width so that it cannot go beyond that width.

Justification & Direction

This lets you change the set the Flex CSS properties of the Breadcrumb element. If you're not familiar with Flexbox, there's a helpful introduction here.

Background

You can add a background color to the element.

Breadcrumbs Design Settings

You can set the breadcrumb element's fonts, margins, paddings, box-shadows, borders and border radius. You'll see these very properties on the controls panel:

Do note, that these properties mentioned, when configured, are for the entire breadcrumb element and not for individual links inside the said element. That means, if you set the Paddings, it will apply to the entire element.

Later we'll discuss how to configure individual links inside the breadcrumb.

Breadcrumbs Delimiters Settings

In breadcrumbs, "delimiters" are the separators of each link.

The default delimiter is an arrow but we can change that and even remove that altogether. The settings can be found on the Delimeter Setup field group.

Now let's discuss the individual settings.

Enable

By default, delimiters are turned On but you can turn it Off, thus removing any delimiter.

Delimiter Type

Just like in the Home Label Type under the Setup field group discussed earlier, you can choose whether to use Text or Icon for the Delimiter Type. When we say "Text," it doesn't necessarily mean words, though words are allowed. What is generally being used are ASCII codes. The default delimiter, → is an ASCII code which generates the arrow.

If you choose Icon as the Delimiter Type, you'll be shown the icon selector field to choose icons you want to use.

LTR & RTL Delimiter

LTR means "Left to Right" while RTL means "Right to Left". These basically mean the direction in how we read letters. For example, you are reading this article starting from the left to the right, thus, this is LTR. Languages like Arabic and Hebrew read their characters and words starting from the right going to the left.

Some websites support multiple languages where both LTR and RTL are supported. This setting gets your breadcrumb delimiter ready by allowing you to set not only the LTR delimiter but also what to use when RTL is enabled.

Spacing

The value you put here will be set as the distance on both the left and right side of the delimiter. So if you set 10px as the value, each delimiter will have a space of 10px on its left and another 10px on its right.

Breadcrumbs Links Settings

Links Settings are virtually the same as the Setup and Design settings combined. The main difference is that Links Settings are specific to the individual links while the first two are applied to the breadcrumb element itself.

The Links Setup allows you to also set the text color and background color of all links inside the breadcrumb the mouse is hovering on a link.

Customize

The customize section consists of controls to customize the element if you are into HTML, CSS, and Javascript.

• ID - Use this option to set an HTML ID for the element. The ID should be unique on the page.
• Class - Use this option to set an HTML Class for the element. You can use the class for your custom CSS code.
• Element CSS - Use this option to have better control over the element to access the inner tags of the element using $el as the CSS selection. Click here for more detailed information.
• Hide During Breakpoint - Use this option to hide the element on different device sizes. Click here for more information.
• Custom Attributes - Use this option to add a custom attributes to the wrapper HTML tag of the element. Such as data-info=123. You can use the option to inject custom information into the element to use on your customization code.

Demo

To see a live demo of the Breadcrumbs Element click here.

Summary

In just a few minutes, you've learned how to add and setup breadcrumbs to Cornerstone / Content Builder. You've learned how to design the breadcrumb element as well as its individual links. Finally you've also learned how to configure the delimiter to your liking.