Breadcrump showing multiple levels of menu selection

Hi everyone,

I would like to have a breadcrumb functionality that shows me the hierarchy of the mashup that I am currently on. e.g., Main menu item/sub menu item/sub-sub menu item.

What I want to achieve is similar to what is highlighted in yellow on the first screenshot below:

My service is as follows

 
let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "BreadCrumb_DS"
});

if(Data){
for(let i=0; i<Data.length; i++){
let row = Data[i];
if(row.linkDestination){
let newEntry = {
DisplayField: row.title, // STRING
TypeField: row.TypeField, // STRING
URLField: row.linkDestination, // STRING
MashupNameField: row.MashupNameField // STRING
};
result.AddRow(newEntry);
}
}
}

The Data input here is the service output that goes to the menu bar widget. I did this because the menu bar widget has no selectedRows or data coming out from it that I can use to bind to my breadcrump widget.

Has anyone ever overcame this issue?

Thanks.