Breadcrumbs

Breadcrumbs are pretty useful information architecture elements in websites. They help improve the user experience of the site. Cornerstone and the Pro family of builders have a Breadcrumb element. In this article, we'll teach you how to use and configure the Breadcrumb element.

  1. Breadcrumbs Setup
  2. Breadcrumbs Design Settings
  3. Breadcrumbs Delimiters Settings
  4. Customize
  5. Demo
  6. Summary

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

Breadcrumbs Example

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.

Breadcrumbs Element

You'll be able to see something like this:

Breadcrumbs Preview

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.

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

Breadcrumbs Setup

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.

Breadcrumbs Home Label TextBreadcrumbs Home Label Icon

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.

Breadcrumbs Label Icon

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 Background

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:

Breadcrumbs Design Settings

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.

Breadcrumbs Desing Settings Paddings

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

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

Breadcrumbs Delimeter Seperators

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.

Breadcrumbs Delimeter Setup

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.

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.

Breadcrumbs Link Setup

Customize

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

Breadcrumbs Customize
  • 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.
Custom Attributes

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.

See something inaccurate? Let us know