The Breadcrumbs widget in 10Web Builder improves navigation by adding breadcrumb trails. These trails show users their current location on your site and make browsing easier. Breadcrumbs are automatically generated from your site's pages and taxonomy.
Additional use cases
Imagine you're creating an e-commerce website. By adding the Breadcrumbs widget to your single product page, users can quickly see the path to the product, such as:
Home >> Products >> Category >> Product
This navigation makes it easy for users to backtrack through product categories, enhancing the overall user experience.
Adding Breadcrumbs widget
- Open the page in 10Web Builder.
- Select the Breadcrumbs widget from the widget panel.
- Drag and drop it onto the canvas where you'd like to place it.
- Configure the settings below.
Content tab
- Text color: Choose the color of the text.
- Link color: Set the link color for both normal and hover states.
- Typography: Customize the typography settings for the breadcrumbs.
- Alignment: Choose between left, right, or centered.
- Separator Icon: Select an icon to serve as a separator between breadcrumb path elements
- Icon size: Tweak the size of the separator icon
- Hide the current page: on/off toggle to include or exclude a current page from the breadcrumb
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.