Salla Bread Crumb - Salla Storefront - Web Components - Twilight Documentation

The <salla-breadcrumb> web component is used as a navigational helper and hierarchy for pages. Breadcrumbs are used as a high-level representation of where users have navigated. Users can click the pages' texts to go back to previous pages.

Example

Usage

HTML

SASS

Simple Example

Advanced Example | Using `slots`

Slots

Theslots makes it customizable to modify certain labels, such as icon.

Slot	Description
`icon`	Replaces the breadcrumb arrow icon with a customized icon. Find a list of Salla Icons here
`item`	Replaces breadcrumb item, with replaceable props which are `{url}`, `{title}`.

Note

Breadcrumbs in your theme configuration are managed with the following method:
salla.config.get('theme.settings.is_breadcrumbs_enabled') to toggle their visibility.

Once enabled in your theme, breadcrumbs are automatically generated based on the previous page or by retrieving the parent page using:
salla.config.get('page.parent').

Breadcrumb

Example#

Usage#

Slots#

Example

Usage

Slots