Wix Editor: Customizing Your Breadcrumbs Trail

After adding and setting up your breadcrumbs trail, you can make it your own by customizing it to suit your desired look. Select presets, adjust the layout, and personalize the design to encourage visitors to keep clicking and exploring your site.

Important:

You need to enable Velo Dev Mode on your site in order to add and customize breadcrumbs. Velo allows you to use coding on your site to create custom functionalities and interactions.

---

Changing the layout of your breadcrumbs trail

Adjust the layout of your breadcrumbs trail to fit your site's alignment. You can change settings such as the separators, spacing, and direction of items.

To adjust the trail's layout:

1. Click the breadcrumbs element in your editor.

2. Click the Layout icon

   

   .

3. Adjust the layout using the available options:

   • Overflow items: Choose how to display items in the trail:

     • Wrap: If items don't fit, another line is created on the trail.

     • Collapse: Items are displayed on one line only. If they don't fit, an ellipsis displays.

   • Show separators: Enable the toggle to show separators between trail items, then choose the icon you want to use: Arrow or Forward slash.

   • Horizontal spacing: Drag the slider to change the spacing between the items.

   • Vertical spacing: Drag the slider to change the spacing above and below the items.

   • Align items: Choose how items are aligned: Left, Center, or Right.

   • Display breadcrumbs from: Choose the direction in which the items appear: Left to Right or Right to Left.

---

Designing your breadcrumbs

Select another trail design from the available options, or customize it further to create a clean, sophisticated way to show the hierarchy of your pages. Adjust the look of the whole trail with settings such as spacing, color, and size.

To customize the design:

1. Click the breadcrumbs element in your editor.

2. Click the Design icon

   

   .

3. (Optional) Select another preset design.

4. Click Customize Design.

5. Choose what you want to design from the dropdown menu:

Background

Click Background in the dropdown menu and choose how you want to customize it:

• Background fills: Choose a color for your trail background, and set its opacity.

• Borders: Add a border to your trail background, and change the color, width and spacing.

• Corners: Make the corners of the trail background square, or more circular.

• Shadow: Add and adjust a shadow on your trail to give it a cool 3D effect.

Separators

1. Click Separators from the dropdown menu.

2. Click the Show text toggle to enable separators between trail items.

3. Choose how you want to customize the separator:

   • Style: Apply one of your saved text themes to the separator.

   • Fonts: Choose a font from the dropdown menu for the separator.

   • Font size: Set how big or small you want the item separator to be.

   • Color and Alignment: Choose the colors for your separator, and set the text direction and alignment.

   • Spacing: Make the spacing between the characters and lines bigger or smaller.

   • Shadows: Add a shadow to the separator to give it a cool 3D effect.

Items

Click Items in the dropdown menu, and use the options to make them look the way you want:

• Items state: Select which mode you would like to adjust the items for:

  • Regular: How the item looks before a visitor interacts with them.

  • Hover: How the item looks when a visitor hovers their cursor over them.

  • Current page: How the item is displayed when it is the page the visitor is currently on.

• Background Fills: Choose a color for your items, and set their opacity.

• Text: Adjust the text for your trail items. You can choose and edit options such as the font, color, and alignment to suit your site's look and theme.

• Borders: Add and adjust a border on your items. You can change the color, width and spacing to make them stand out on your page.

• Corners: Make the corners of the trail items square, or more circular.

• Shadows: Add and adjust a shadow on your items to give them a cool 3D effect.

• Layout: Adjust the padding around your items to make the space around them smaller or bigger.

This article is credited to the Wix team - https://support.wix.com/ and we thank them for that!