header-logo
Learn how to use Wix to build your site and business.
Design and manage your site using intuitive Wix features.
Manage subscriptions, plans and invoices.
Run your business and connect with members.
Learn to purchase, connect or transfer a domain to your site.
Get tools to grow your business and web presence.
Boost your visibility with SEO and marketing tools.
Get advanced features to help you work more efficiently.
Find solutions, learn about known issues or contact us.
placeholder-preview-image
Improve your skills with our courses and tutorials.
Get tips for web design, marketing and more.
Learn to increase organic site traffic from search engines.
Build a custom site using our full-stack platform.
Get matched with a specialist to help you reach your goals.
placeholder-preview-image

Wix Editor: Customizing Your Breadcrumbs Trail

4 min
In this article
  • Changing the layout of your breadcrumbs trail
  • Designing your breadcrumbs
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.
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. Learn more about Velo

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:
    • 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
Breadcrumbs trail layout panel. The cursor is hovering over a spacing slider.

Designing your breadcrumbs

Select 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:

  1. Click the breadcrumbs element in your editor.
  2. Click the Design icon .
  3. Click Customize Design.
  4. Choose what you want to design from the dropdown menu:
The breadcrumbs design panel. The Items option is open.
Breadcrumbs trail layout panel. The cursor is hovering over a spacing slider.
The breadcrumbs design panel. The Items option is open.