How to achieve BreadCrumb using Wappler ?
If anyone has an example, please share with us.
Have a look at https://cobbcoleatherhats.com/products.php?id=3, where you will see the following in Page Source or similar.
<div class="row">
<div class="col">
<div class="breadcrumb">
<a class="breadcrumb-item breadcrumb-link" href="[product-lines.php](https://cobbcoleatherhats.com/product-lines.php)">Products</a>
<a class="breadcrumb-item breadcrumb-link" href="[#](https://cobbcoleatherhats.com/products.php?id=3#)" dmx-bind:href="product-collection.php?id={{dvProducts.data[0].ProductLineID}}" dmx-text="dvLines.data[0].LineName"></a>
<a class="breadcrumb-item breadcrumb-link active disabled" href="[#](https://cobbcoleatherhats.com/products.php?id=3#)" dmx-text="dvCollections.data[0].CollectionName"></a>
</div>
</div>
</div>
Edit:
Actually, the code within Wappler looks to be slightly better to understand
When using Bootstrap 4, you can insert a breadcrumbs under any container
with breadcrumb items inside:
that have all the needed link properties:
This is the Bootstrap breadcrumb menu (the one that I used): https://getbootstrap.com/docs/4.0/components/breadcrumb/
The top part of the breadcrumb that you alluded to is similar to the Bootstrap style, the progress bar can be made using the Bootstrap progress bar as per https://www.w3schools.com/bootstrap4/bootstrap_progressbars.asp