Appearance
Breadcrumbs Widget
The Breadcrumbs widget displays hierarchical navigation breadcrumbs showing the path from the homepage to the current page. Help visitors understand where they are and navigate back to parent pages easily.
Overview
Show users their current location within your site’s hierarchy. The widget automatically generates breadcrumb trails based on page structure, post types, and taxonomy terms. Includes SEO-friendly schema markup for better search engine visibility.
Key Features
- Automatic breadcrumb trail generation
- Works with pages, posts, archives, and custom post types
- Voxel taxonomy field support
- JSON-LD schema markup for SEO
- Multiple separator styles
- Full styling customization
- Responsive design
Setup Instructions
Step 1: Enable the Widget
- Navigate to Voxel Toolkit → Widgets in your WordPress admin
- Find Breadcrumbs in the list
- Toggle the switch to enable the widget
- Click Save Changes
Step 2: Add to Template
- Edit your page or template in Elementor
- Search for Breadcrumbs (VT)
- Drag the widget to your desired location (typically below the header)
- Configure settings and styling
- Save the template
Widget Settings
General Settings
| Setting | Description | Default |
|---|---|---|
| Home Text | Text displayed for the home link | Home |
| Show Home Link | Include home page in breadcrumbs | Yes |
| Separator | Character between breadcrumb items | / (slash) |
| Show Current Page | Display the current page name | Yes |
| Max Depth | Maximum number of levels to display | 10 |
Separator Options
- / – Slash
- > – Greater than
- → – Arrow
- | – Pipe
- · – Dot
- Custom – Enter your own separator
Structure Options
| Setting | Description | Default |
|---|---|---|
| Include Post Type Archive | Show archive link before single posts | Yes |
| Show Parent Posts | Display hierarchical parent chain | Yes |
| Include Taxonomy Terms | Add category/taxonomy terms to trail | No |
| Taxonomy Field Key | Voxel taxonomy field key (e.g., job-category) | Empty |
| Show Parent Terms | Include parent taxonomy terms | Yes |
| Prefix Text | Optional text before breadcrumbs | Empty |
| Suffix Text | Optional text after breadcrumbs | Empty |
SEO & Schema
| Setting | Description | Default |
|---|---|---|
| Enable Schema Markup | Add JSON-LD structured data for search engines | Yes |
| Add Nofollow to Links | Add rel=”nofollow” to all breadcrumb links | No |
Styling Options
Link Styling
- Link color (normal and hover)
- Typography settings
- Text decoration
- Hover effects
Current Page Styling
- Text color
- Typography
Separator Styling
- Separator color
- Size
- Spacing
- Opacity
Container Styling
- Background color/gradient
- Padding and margin
- Border and border radius
- Box shadow
- Alignment (left, center, right)
Using with Voxel Taxonomies
To include Voxel taxonomy terms in your breadcrumbs:
- Enable “Include Taxonomy Terms”
- Enter your taxonomy field key (e.g., “job-category” or “listing-type”)
- Optionally enable “Show Parent Terms” for hierarchical taxonomies
The breadcrumbs will show the term hierarchy leading to the current post.
Use Cases
Directory Listings
Show category hierarchy: Home → Restaurants → Italian → Pizza Place
Documentation Sites
Help users navigate docs: Home → Getting Started → Installation
E-commerce
Display product category path: Home → Electronics → Phones → iPhone
Blog Posts
Show article location: Home → Blog → Technology → Article Title
Troubleshooting
Breadcrumbs Not Showing
- On the homepage, only the home link shows (this is expected)
- Verify the widget is enabled in Toolkit settings
- Check that the widget is added to the correct template
Taxonomy Terms Not Appearing
- Verify the taxonomy field key is correct
- Check that the post has terms assigned
- Ensure “Include Taxonomy Terms” is enabled
Wrong Page Hierarchy
- Check page parent settings in WordPress
- For custom post types, verify hierarchical structure