Breadcrumbs
A link list, with a caret separator between links and a decorative horizontal rule to the right of the list.
View a live demo of this section here.
The following is a detailed listing of the styling edits made to the section, the modules used in the section, and field changes from the modules’ default state.
Section Styles
Alignment and Spacing > Vertical Alignment
MIDDLE
Modules
**
Section Settings**
Section Options
Custom Columns
Custom Columns
{
number: 1,
width: {
desktop: {fit_content: true},
mobile: {unit: %, width: 100}
},
{
number: 2,
margin: {
desktop: {left: 25},
mobile: {top: 0, left: 0;}
}
**
Utility**
Utility Type
Link List
Layout > Divider
Caret
Layout > Spacing
8
Styles > Links > font
theme.typography.body_text_tiny.font.size
**
Divider Line
**No changes to default content.
Usage Guide
The Breadcrumbs section provides essential navigation context for visitors exploring content-heavy areas of your HubSpot site. This section works particularly well on resource pages, course catalogs, event listings, and deep content hierarchies where users need clear wayfinding assistance.
When implementing this section, drag it from the theme’s sections library and position it near the top of your page, typically below the header but before your main content. The two-column layout automatically adjusts for mobile devices, ensuring the breadcrumb trail remains accessible across all screen sizes.
The decorative horizontal rule serves a dual purpose—it visually separates the navigation from your content while adding subtle design polish that aligns with Rubric’s clean aesthetic. This makes the section ideal for academic institutions showcasing department hierarchies or event organizations displaying category structures.
For optimal user experience, configure your link list to reflect your actual page hierarchy rather than creating arbitrary navigation paths. The caret separators between links follow web conventions, making the navigation pattern immediately familiar to visitors.
Consider pairing this section with Rubric’s other navigation components when building complex site architectures. The tiny font sizing keeps breadcrumbs unobtrusive while maintaining readability, and the fit-content width ensures the navigation doesn’t overwhelm your page layout.
Pro tip: This section integrates seamlessly with HubSpot’s URL hierarchy, making it particularly valuable for sites with nested topic areas or multi-level content organization. The responsive margin settings ensure consistent spacing whether visitors access your content on desktop or mobile devices.