Wix Harmony Editor: Adding and Customizing Breadcrumbs

Wix Harmony Editor: Adding and Customizing Breadcrumbs

Give your visitors a trail to follow with breadcrumbs. When people can see where they are on your site, and jump back to where they came from, they feel at home and keep exploring.

---

Adding breadcrumbs

Browse the breadcrumb designs and drag your favorite onto your page, right where your visitors will find it most useful.

To add breadcrumbs:

1. Go to your editor.

2. Click + Add.

3. Select Elements.

4. Click the Menu & Search icon [icon] on the left.

5. Find Breadcrumb navigation and drag a design onto your page.

---

Customizing breadcrumbs

Make the trail work for your site. Choose which pages it shows, decide how your homepage appears, and add an accessible name for visitors who use assistive technology.

To customize breadcrumbs:

1. Go to your editor.

2. Click the breadcrumbs element on your page.

3. Choose how to customize it:

Choose what appears on the trail

Decide which pages show up on the trail, and whether separators appear between them.

1. Show or hide the separators between breadcrumbs:

   1. Click the Display elements icon

      

      on the action bar.

   2. Select or deselect the Separators checkbox.

2. Choose the levels of hierarchy you want to show in the breadcrumbs:

   1. Click the All design options icon

      

      on the action bar.

   2. Click Layout.

   3. Select an option from the Default state dropdown:

      • Full trail

      • Hide homepage

      • Hide current page

        

Show the homepage as text or an icon

Show your homepage by name, or swap it for a small icon that fits your style.

1. Click the All design options icon

   

   on the action bar.

2. Click Layout.

3. Select Text or Icon from the Display homepage as dropdown.

4. (If you selected icon) Choose the icon you want to display:

   1. Click Customize Icon on the action bar.

   2. Choose the icon you want:

      • Icon type: Select Static or Animated.

      • Choose an icon: Click the Replace icon

        

        to choose a new icon from the Media Manager.

   

Add an accessible name

Give the trail a name for visitors who use assistive technology.

1. Click the Settings icon

   

   on the action bar.

2. Enter a name in the Accessible name field.

   

---

Adjusting the layout and design

Fine-tune how the trail fits on your page and how it looks. Change the layout, tweak the spacing and style each part until the trail feels like part of your brand.

To adjust the layout and design:

1. Go to your editor.

2. Click the breadcrumbs element on your page.

3. Click the All design options icon

   

   on the action bar.

4. Choose what to adjust:

Adjust the breadcrumbs' layout

Control how items wrap, where they sit and how much space they get.

1. Click Layout and adjust the trail:

   • Overflow items: Choose what happens to items that don't fit on the trail: Wrap or Collapse (with ellipses).

   • Alignment: Click the Left align, Center align, Right align or Justify icon.

   • Apply site direction: Choose whether or not to apply your default site direction (left-to-right or right-to-left).

2. Click Spacing and drag the sliders (or enter a value) to adjust:

   • Padding: The space around the trail.

   • Space between items: The horizontal space between the items.

   • Space between rows: The vertical space between rows, when the trail wraps.

     

Design the breadcrumbs

Give each part of the trail its own look, from the background to the items visitors click.

1. Select the part you want to design from the dropdown at the top: Breadcrumbs, Items or Separators.

2. (Items only) Select a state: Regular, Hover or Selected.

3. Design the part using the options, such as Fill colors, Text, Borders, Corners and Shadow.