Breadcrumb

Help ensure that your visitors don’t get lost on your site. The Breadcrumb tool helps them find their way around showing a page heirarchy based on your site's page structure.

Examples

Follow the trail

Here is a simple example of the Breadcrumb trail using its default settings. The link color is inherited from that set in the Control Center on this page.

If you want to be a good archeologist, you gotta get out of the library!

Breadcrumbs are a great secondary navigation. These are often used toward the bottom of web pages, but with the Breadcrumb tool you can place them wherever feels natural for your page and site design.

IMPORTANT. Be sure that you remember to turn on breadcrumbs in the RapidWeaver settings. You enable this in the Advanced section. This tells RapidWeaver to generate the needed page hierarchy structure.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

General

Include Base Margin

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

Styling

Links Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the text of the links within the Breadcrumb trail. You're also provided an option to choose a custom one-off color as well. We've set the default though to Inherit, which uses the link coloring from the Control Center to match the color of the other links on your page.

Divider Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the dividers between the page names. You're also provided an option to choose a custom one-off color as well.

Divider Type

Choose the style of divider you'd like inserted between each of the page links.

Disable Link Underlines

Enabling this feature turns off the text decoration of the links to the pages in the breadcrumb trail. This is turned on by default.

Alignment

Alignment (Uniform)

This setting allows you to align the breadcrumb trail to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Alignment (Non-Uniform)

Clicking on the small plus icon will give you the ability to adjust the alignment of the breadcrumb trail independently at each of the 6 responsive breakpoints giving you more granular control.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.