Breadcrumbs

Breadcrumbs

Content Controls

The controls in this section let users manage which breadcrumb integration to use.

This section provides tools to customize the visual container of the breadcrumbs, influencing its size, background, borders, and overall layout.

Width – Adjust the width of the breadcrumbs container to best fit your design.
Background – Pick a background color to enhance or blend the breadcrumbs into your page.
Padding – Define the space within the breadcrumbs container, ensuring content inside is appropriately spaced from the edges.
- Padding – Fine-tune the padding around the breadcrumb links, optimizing for readability and style.
Borders – Shape and style the borders around the breadcrumbs container.
- Radius – Control the roundness of the container corners to fit your site’s aesthetic.
- Styling – Customize the style, width, and color of the container borders for a standout or subtle look.
- Shadow – Add a shadow effect to elevate or distinguish the breadcrumbs container from other elements.
Content Alignment – Align the breadcrumb links within the container for a centered, left, or right orientation.

Typography controls offer ways to style and format the breadcrumb text, links, and separators, ensuring readability and cohesive design.

Text – Refine the font type, size, and other text properties of the breadcrumbs for better visibility and alignment with your design.
Links – Customize the appearance of breadcrumb links, focusing on color, hover effects, and more to make them engaging.
Separator – Style the symbols or characters that appear between breadcrumb links, ensuring they match your website’s theme.

Modify the vertical space around the breadcrumbs container, giving it room to breathe or bringing it closer to neighboring elements as desired.

Margin Top – Define the space above the breadcrumbs, creating separation from elements above.
Margin Bottom – Set the space below the breadcrumbs, distancing it from elements that follow.