items

Sets or gets breadcrumbs items.

Description

Setting the items property sets the items for a breadcrumbs element.

Set items to an empty array ([]) to remove all breadcrumbs items.

Getting the items property returns breadcrumbs items that have been set using code. If no items have been set using code, your site generates a default items array based on your home page, the site visitor's location, and the organization of your site's pages including any menu folders you have added to your site.

Properties that don't have a value are omitted from the returned array.

You can't modify the items array in-place. To add, change, or remove individual breadcrumbs items:

Store the value of the items property in a variable.
Make changes to the variable's array of items.
Reset the items property with the variable's modified array.

Type:

Array<Item>Read & Write, default value is An empty array

NAME

TYPE

DESCRIPTION

label

string

The label of the breadcrumbs item. This is text that the site visitor sees and can click to navigate. Required if icon isn't specified. If not specified, label is omitted from the returned array.

icon

string

The icon of the breadcrumbs item. This is a vector image that the site visitor sees and can click to navigate. Required if label isn't specified. If not specified, the icon key is omitted from the returned array.

The vector image file can be an image file from the Media Manager, an external SVG image from any web location, or a literal SVG XML string.

The formats supported are:

Vector images from the Media Manager: wix:vector://v1/<vector_uri>/<filename>
Vector images from the web: http(s)://<vector image url>
Vector XML string: <svg>...</svg>

link

string

Optional link for the breadcrumbs item as a URL relative to your site's home page. This is the link the site visitor navigates to when they click on a breadcrumbs item. The page opens in the same window/tab.

If a link isn't specified, it's undefined in the breadcrumbs object. The corresponding label or icon isn't clickable.

Note: In the default breadcrumbs items array generated for a page, any link properties contain absolute URLs, not relative ones.

isCurrent

boolean

Setting isCurrent to true for a breadcrumbs item causes the item to appear highlighted in the breadcrumbs element. You can use this property to indicate which page in a breadcrumbs trail is currently displayed. In a default items array, the last item's isCurrent value is true.

Note: The value of isCurrent isn't validated against which page is actually displayed. It can also be set to true for multiple breadcrumbs items.

Was this helpful?

Get breadcrumbs items

Copy Code

1// This example assumes the items were set
2// using code.
3
4let breadcrumbItems = $w('#myBreadcrumbs').items;
5let firstIcon = breadcrumbItems[0].icon;
6
7/* Sample array of breadcrumb items: 
8 * [
9 *   {
10 *     'icon': 'wix:vector://v1/4c47c6_d6f8a5ad487c416399846a79a524196f.svg/',
11 *     'link': '/home'
12 *   },
13 *   {
14 *     'label': 'Venue',
15 *     'link': '/zoo'
16 *   },
17 *   {
18 *     'label': 'Animal',
19 *     'link': '/lions'
20 *   }
21 * ]
22 * 
23 * In the 1st item, label is undefined. 
24 * In the last 2 items, icon is undefined.
25 */

Set items for various kinds of breadcrumbs

Copy Code

1/*****************************
2 * A basic breadcrumbs trail *
3 *****************************/
4
5// Note that the site's base URL 
6// shouldn't be included in any
7// item's link property.
8$w('#myBreadcrumbs').items = [
9  {'icon: 'wix:vector://v1/4c47c6_d6f8a5ad487c416399846a79a524196f.svg/', 'link': '/'},
10  {'label': 'Venue', 'link': '/zoo'},
11  {'label': 'Animal', 'link': '/lions', 'isCurrent': true}
12];
13
14/*******************************
15 * A trail with multiple icons *
16 *******************************/ 
17$w('#myBreadcrumbs').items = [
18  {'icon': 'wix:vector://v1/4c47c6_d6f8a5ad487c416399846a79a524196f.svg/', 'link': '/'},
19  {'label': 'Venue', 'link': '/zoo'},
20  { 'icon': '<svg width='50' height='50'><circle cx='25' cy='25' r='20' stroke='red' stroke-width='5' fill='blue'/></svg>', 
21    'link': '/lions', 
22    'isCurrent': true
23  }
24];
25
26/*****************************************************
27 * A trail with no links, for displaying the context *
28 *****************************************************/
29$w('#myBreadcrumbs').items = [
30  {'icon': 'wix:vector://v1/4c47c6_d6f8a5ad487c416399846a79a524196f.svg/'},
31  {'label': 'Zoo'},
32  {'label': 'Tiger', 'isCurrent': true}
33];

Add a breadcrumbs item

This example retrieves the breadcrumbs items, adds a new item, and then overwrites the old items.

Copy Code

1let crumbs = $w('#myBreadcrumbs').items;
2crumbs.push({'label': 'My New Label', 'link': '/mynewlink'});
3$w('#myBreadcrumbs').items = crumbs;

Set breadcrumbs items for dynamic pages using Wix Location

This example demonstrates how to customize breadcrumbs for dynamic pages.

Note: In the interest of simplicity the code doesn't deal with display considerations or validations that would normally be required to make sure site visitors perform the flow as intended.

The customization includes:

A "tourism" collection that contains countries and places to visit. The example queries for places to visit in Italy.
2 dynamic pages:
- A dynamic list page called "Tourism (All)" that lists travel destinations (places). The link to this dynamic page is based on the prefix in the "link-tourism-all" collection field.
- A dynamic item page called "Tourism (Title)" for viewing a specific place. The link to this dynamic page is based on the path in the "link-tourism-title" collection field.
A breadcrumbs element created with code. breadcrumbs elements should be added to all pages. This example sets the "customBreadCrumbs" element for the "Tourism (Title)" dynamic item page.

Copy Code

1import wixData from 'wix-data';
2
3$w.onReady(function () {
4  $w('#tourismDynamicDataset').onReady(() => {
5    wixData.query('tourism')
6      .eq('country', 'Italy')
7      .find()
8      .then((results) => {
9        let firstPlaceToSee = results.items[0]
10        $w('#customBreadcrumbs').items = [
11          { 
12            icon: 'wix:vector://v1/4c47c6_d6f8a5ad487c416399846a79a524196f.svg/', 
13            link: '/' 
14          },
15          { 
16            label: 'Places to See', 
17            link: '/' + firstPlaceToSee['link-tourism-all'] 
18          },
19          { 
20            label: firstPlaceToSee.title, 
21            link: '/' + firstPlaceToSee['link-tourism-title'] 
22          }
23        ]
24      });
25  })
26});