Breadcrumb

The Breadcrumb Widget in Topper Pack helps users navigate your site more easily and improves SEO by showing a clear path back to the homepage. It supports multiple styles and full customization directly within Elementor.

🚀 How to Enable the Breadcrumb Widget

To start using the Image Widget, follow these steps:

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the Breadcrumb widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

🔹 Step 1: Add the Breadcrumb Widget

1. Open the Elementor Editor for the page where you want to add breadcrumbs.
2. Search for “Breadcrumb” in the Elementor widget panel.
3. Drag the Breadcrumb TP widget into your layout.

🔹 Step 2: Configure Breadcrumb Options (Content Tab)

• Select Style
  Choose from the following styles for how the breadcrumb is displayed:
  • Default
  • Underlined Heading
  • Line Separator
  • Dot Separator
  • Boxed Items
  • Sidebar Style

• Select Title
  • Options: Default, Custom, or None
  • If you choose Custom, a Title field will appear.
• Title HTML Tag
  Choose the appropriate HTML tag for the title (e.g., H1, H2, H3, etc.) based on your SEO or design preference.
• Enable Breadcrumb
  Toggle to Yes to show breadcrumbs on the page.
• Home Text
  Enter the label for the homepage (default: Home).
• Icon
  • Upload or select an icon to use as a separator between breadcrumb items (e.g., > or /).

🔹 Step 3: Customize Breadcrumb Style (Style Tab)

Use the Style Tab to visually adjust how the breadcrumb looks:

🔸 Layout Section

• Gap – Set space between items.
• Flex Direction – Align items horizontally (row) or vertically (column).
• Item Alignment – Control alignment (start, center, end).
• Justify Content – Set the position of breadcrumb elements.
• Background Type – Add color or gradient.
• Margin & Padding – Adjust spacing around the breadcrumb container.
• Border Type & Radius – Add rounded corners or outlines.
• Box Shadow – Apply shadows for depth.

🔸 Title Style Section

Customize the breadcrumb title:

• Typography
• Font size, weight, and color
• Margin/Padding

🔸 Breadcrumb Style Section

Style individual breadcrumb links and separators:

• Text color and hover color
• Typography settings
• Spacing between items and separators

✅ Final Output Example

• Home > Blog > Single Post
• With visual enhancements such as underlines, icons, or a boxed layout, based on your selected style.