Light Mode

Breadcrumb

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

Alt text

Usage

  <salla-breadcrumb></salla-breadcrumb>

<salla-breadcrumb>
   <div slot="item">
     <salla-button fill="outline" color="success" href={url}>{title}</salla-button>
   </div>
   <i slot="icon" class="sicon-cancel"></i>
 </salla-breadcrumb>

This JS web component can be targeted for styling by its `:host` class. Following is a complete source code for customizing this component:

:host {
  display: block;
}

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}`.

:::info[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').

:::

Last modified: 2 months ago