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 site's look and theme. Select presets, adjust the layout, and personalize the design to encourage visitors to keep clicking and exploring your site.In this article, learn more about:
Adjusting the layout of the trail Customizing the designImportant: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. Learn more about VeloChanging the layout of your breadcrumbs trailAdjust 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:
Click the breadcrumbs element in your editor. Click the Layout icon . Adjust the layout using the available options:
    
How are overflow items displayed?: Select how to display items that don't fit on the trail:
        
Show all items: If items don't fit, another line is created on the trail. Collapse items: Items are displayed on one line only. If they don't fit, an ellipsis displays.   Separators: Enable the toggle to show separators between trail items, then choose the icon you want to use: V-shape or Backslash.  Vertical spacing: Drag the slider to change the spacing above and below the items. Horizontal spacing: Drag the slider to change the spacing between 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 breadcrumbsSelect another trail preset from the available options, or customize it further to create a clean, sophisticated way to display the hierarchy of your pages to visitors. Adjust the look of the whole trail with settings such as spacing, color, and size.To customize the design:
Click the breadcrumbs element in your editor. Click the Design icon . Click Customize Design. 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
Click Separators from the dropdown menu. Click the Show text toggle to enable separators between trail items. Choose how you want to customize the separator:
    
Themes: 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. Formatting: Add different formatting options to your separator, such as bold, underline, and strikethrough. 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.  ItemsClick 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 items look before a visitor interacts with them. Hover: How the items look 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.