header-logo
Getting started with WixBuild your website and business with Wix. Try using our AI tools to create your website, customize templates, or hire professionals to build or enhance your online presence.
Creating a websiteRead how to use the Wix Editor and manage content on your site. Discover how to protect your visitors' privacy and make your site accessible.
Account & billingReview your account settings, manage your subscriptions and plans and understand your invoices.
Using the Wix mobile appsUse our mobile apps to run your business efficiently on the go and set up a dedicated app for your site members to stay in touch.
Connecting a domainFollow our step-by step guides to learn how to purchase, connect or transfer a domain for your site, and find out how to keep your site’s data secure.
Managing your businessGet tools to grow your business and web presence. Find the right tools for your specific needs, set up online payments and keep track of your site's analytics.
Promoting your siteLearn to make your site more visible promoting it on search engines, sending emails and running paid ads. Improve your online presence with practical tips.
Studio, Partners & EnterpriseGet the most out of your Studio or Enterprise account with advanced features that'll help you work more efficiently.
Need more help?Find solutions for site performance and technical issues, learn about issues we’re working to fix or contact us for help.
placeholder-preview-image
Wix LearnImprove your skills with our courses and tutorials.
Wix BlogGet tips for web design, marketing and more.
SEO Learning HubLearn to increase organic site traffic from search engines.
Website developmentBuild a custom site using our full-stack platform.
Hire a ProfessionalGet matched with a specialist to help you reach your goals.
placeholder-preview-image
In this article
  • Changing the layout of your breadcrumbs trail
  • Designing your breadcrumbs
  1. Home
  2. Creating a website
  3. Using the Wix Editor
  4. Managing pages and menus
  5. Menus
  6. Wix Editor: Customizing Your Breadcrumbs Trail

Wix Editor: Customizing Your Breadcrumbs Trail

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 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. 
screenshot of breadcrumb layout panel.

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:
The breadcrumbs design panel. The Items option is open.

Did this help?

|
Hire a ProfessionalGet matched with a Wix Partner who can help you reach your site goals.
Start Now

Helpmate

Hello

Need a bit more guidance?
Unlock personalized helpLog in to get the most out of Helpmate.