Skip to content

POWER Sec Breadcrumbs Module

How to configure the Sec Breadcrumbs module for POWER Pro theme in HubSpot

icon-module-sec-breadcrumbs

SEC BREADCRUMBS

Provide site visitors with a visible path showing where they are on your site.

Add clickable links to create page specific navigation.

sec-breadcrumbs-example

Page Speed Impact

LOW

Very minimal impact to page load speed, the code for this module has been optimized to limit resources needed on page load.

TIPS

Place your breadcrumbs in the same place across all pages where you'll be using breadcrumbs.

It is recommended to add for all pages within the same navigation path.

FAQ

What image size do I use for the Featured Image?

Anchor links can be added to the Sec Breadcrumbs module using the External URL type.

Module Options

Breadcrumb

This is where you will add the items that appear in the breadcrumbs.

add-breadcrumb

There are no breadcrumbs added by default, you'll need to click "Add one" to create the first link.

Once you have added your first breadcrumb, there will be a "+Add" link to create additional links.

breadcrumb-add-additional

Breadcrumb Item(s) → Title

This is where the title/text goes that you want to display for the breadcrumb/link.

Breadcrumb Item(s) → Link

The Link dropdown allows you to choose the type of link to include for the button: External, Content, or Blog

Based on your selection, you can either add the URL or choose the page or blog post.

Breadcrumb Item(s) → Link → Open in New Window

There is a toggle to allow you to open the link in a new window. The default is set to open in the same window/tab.

Tip: Since breadcrumbs are used to show the user's path to the page, it is recommended to open in the same window/tab.

Breadcrumb Item(s) → Link → Link Type

There is a check box for "No Follow" which allows you to indicate that the link is not associated with your website. This setting has SEO implications if used incorrectly.

Breadcrumb Item(s) → Animation

You can also override the default animation settings at the item level.

accordion-item-animation-settings

Layout → Padding Top and Padding Bottom

Choice of Standard, None, Small, Medium, Large, or First Section with Header. Refer to Settings that apply to all Section Modules for more details about these choices.

Style → Color Scheme

Choice of Light or Dark.

Tip: If you change the background color for the module, the definition of Light Color scheme is a light background with dark text and Dark Color scheme is a dark background with light text. Based on your background color, you would need to toggle the color scheme to ensure the text color displays properly and is legible.

Style → Background

Choice of Background Color, Primary Background Color, Background Image/Video, Background Gradient, or Transparent. Refer to Settings that apply to all Section Modules for more details about these choices.

Animation

Checkbox to turn on/off Animate on Scroll. Turning off here will only apply to this section, to turn animation off globally refer to Theme Options for Animations.

Animation → Section

Ability to change the Animation Type and Delay for the Section. 

Anchor Link ID

Set an anchor link for the module. Can be used to create a link directly to that section on the page and/or to include in an on-page menu (like Sticky Sub-Menu) to allow users to jump to that section without scrolling.

Easily add an anchor link to this section, for full instructions refer to Setting up Anchor Links.

Custom Class

Ability to add a Custom Class to use in the child.css for individual customizations.

See full instructions for setting a Custom Class for Section Modules.

Is in Viewport?

Performance setting to determine how the CSS is loaded for the module.

section-module-anchor-link-id-custom-class-is-in-viewport

If the module is at the top of the page and located within the viewport of the browser, check this option to ensure the CSS loads on page load.

If the module is outside of the viewport, especially on mobile, uncheck this box so the CSS loads asynchronously.

Learn more about this setting as it relates to Page Speed and Core Vitals.

Configurations

BREADCRUMB FULL WIDTH LAYOUT

sec-breadcrumb-gradient-example

Layout → Padding Top and Padding Bottom

Medium

Style → Color Scheme

Dark

Style → Background

Gradient

Examples

cadesignform-breadcrumb-example
configura-breadcrumb-example
omapaja-breadcrumb-example

DESIGN SOMETHING COOL WITH THIS POWER MODULE?

Share it with us!

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.