Skip to main content

BlockStrap Documentation

BS > Breadcrumb

Block Description

The BS > Breadcrumb Block is a part of the BlockStrap Page Builder Blocks plugin and is designed to display a breadcrumb navigation trail on your WordPress website. This block helps guide users through the site’s hierarchy by providing a clear and easily navigable path back to the homepage or other parent pages.

Block Features

The BS > Breadcrumb Block offers the following features:

  • Automatically generates a breadcrumb trail based on the current page and its position within the website’s hierarchy
  • Allows customization of the separator, text style, and appearance to match the website’s design
  • Offers advanced settings for further customization, such as adding custom CSS classes

Block Options

The BS > Breadcrumb Block provides various options for customizing the content, style, and advanced settings of the block.

Content

bs breadcrumb content options
  • Home Link
    • Hide the home link (checkbox): Enable this option to remove the home link from the breadcrumb trail. When checked, the breadcrumb trail will begin with the first level after the homepage.
    • HOME TEXT (input field): Customize the text that represents the home link in the breadcrumb trail. By default, it’s set to “Home”.
    • HOME ICON CLASS (input field): Add a Font Awesome icon class to display an icon alongside the home text in the breadcrumb trail. For example, enter “fas fa-home” to display the home icon next to the home text.

    Style

    bs breadcrumb styles options
    • Background
      • BACKGROUND COLOR (select): Choose the background color for the breadcrumb block using Bootstrap color options or the theme palette. This helps customize the appearance of the breadcrumb block to match your website’s design.
      • Fixed background (checkbox): Enable this option to set the background image as fixed, meaning it will not scroll with the rest of the page content.
      • Use featured image (checkbox) > Upload Image (file picker): If enabled, the featured image of the current page or post will be used as the background image for the breadcrumb block. Alternatively, you can upload a custom image using the file picker.
    • Typography
      • TEXT COLOR (select): Choose the text color for the breadcrumb items using Bootstrap color options or the theme palette. This allows you to ensure the breadcrumb text is easily readable against the background color.
      • FONT SIZE (select): Select the font size for the breadcrumb text from the available Bootstrap options. This ensures consistency in text size throughout your website.
      • FONT LINE HEIGHT (text input): Set a custom value for the line height of the breadcrumb text. This affects the spacing between lines of text, making it easier to read.
      • APPEARANCE (select): Customize the font weight and style of the breadcrumb text by choosing from options like bold, bolder, and others. This allows you to control the emphasis and appearance of the breadcrumb items.
      • LETTER CASE (select): Adjust the letter casing of the breadcrumb text by choosing from options like uppercase, lowercase, or capitalize. This enables you to create a consistent text style across your website.

    Advanced

    bs breadcrumb advanced options
    • Wrapper Styles
      • Margins (input fields): Adjust the margin values for the top, right, bottom, and left sides of the breadcrumb block. Enter custom values in the respective input fields to control the space surrounding the block.
      • Padding (input fields): Modify the padding values for the top, right, bottom, and left sides of the breadcrumb block. Enter custom values in the respective input fields to control the space between the block’s content and its border.
      • BORDER COLOR (dropdown): Choose the color for the border of the breadcrumb block using Bootstrap color options or the theme palette.
      • SHADOW (dropdown): Apply a box-shadow to the breadcrumb block. Choose between different shadow options like small, medium, large, or none to create the desired depth effect.
      • DISPLAY (dropdown): Set the display property of the breadcrumb block, which controls how the block is rendered on the page. Choose from options like block, inline, inline-block, flex and many more.
    • Advanced
      • Additional CSS Class(es) (input field): Apply custom CSS classes to the block for further customization. Enter one or more class names, separated by spaces, in the input field. These custom classes can be used to target the block with additional CSS rules defined in your theme or custom CSS file.

    Feedback