Salla Docs
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Merchant API
  • Merchant API
  • Salla OAuth 2.0
Partner APIs
  • App API
  • Shipment API
Storefront
  • Twilight Engine
  • Twilight SDK
  • Web Components
  • Change Log
Salla CLI
Salla - Opensource
Salla - Developers Community
  1. Elements
  • Overview
  • Usage
  • Components Customization
  • Elements
    • Apps Icons
    • Breadcrumb
    • Color Picker
    • Conditional Fields
    • Count Down
    • Filters
    • Infinite Scroll
    • List Tile
    • Loading
    • Map
    • Modal
    • Placeholder
    • Progress Bar
    • Rating Stars
    • Reviews
    • Reviews Summary
    • Sheet
    • Skeleton
    • Slider
    • Social
    • Social Share
    • Tabs
  • Form
    • Button
    • Bottom Alert
    • Contacts
    • Date Time Picker
    • File Upload
    • Menu
    • Quantity Input
    • Select
    • Tel Input
  • Product
    • Add Product
    • Advertisement
    • Comments
    • Conditional Offer
    • Gifting
    • Installment
    • Meta Data
    • Offer
    • Offer Modal
    • Orders
    • Payments
    • Product Availability
    • Product Card
    • Products List
    • Product Options
    • Product Size Guide
    • Products Slider
    • Quick Buy
    • Quick Order
    • Scopes
    • Search
  • User
    • Cart Summary
    • Localization
    • Login
    • Loyalty
    • Rating
    • User Menu
    • User Profile
    • User Settings
    • Verify
  1. Elements

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#

HTML
SASS
Simple Example
Advanced Example | Using `slots`

Slots#

Theslots makes it customizable to modify certain labels, such as icon.
SlotDescription
iconReplaces the breadcrumb arrow icon with a customized icon. Find a list of Salla Icons here
itemReplaces 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').
Modified at 2024-10-07 11:41:33
Previous
Apps Icons
Next
Color Picker