I have implemented the Angular Breadcrumb directive (available at this link: https://github.com/ncuillery/angular-breadcrumb) that utilizes UI-Router for creating breadcrumbs.
https://i.sstatic.net/VN8Gh.png
The default functionality works well and is suitable for simple breadcrumb navigation. However, I am interested in enhancing it by enabling a dropdown to appear when clicking on the Application crumb. This dropdown would allow me to choose different applications, dynamically changing the URL upon selection.
Here's my progress so far, but I'm unsure how to modify the displayName to alter the breadcrumb structure when selecting a different application.
index.html
<div class="app-breadcrumbs-container">
<ui-breadcrumbs
displayname-property="data.displayName"
template-url="/shared/templates/breadcrumbs.html">
</ui-breadcrumbs>
</div>
breadcrumbs.html
<div class="app-breadcrumb" flex>
<ol>
<li ng-repeat="crumb in breadcrumbs"
ng-class="{ active: $last }">
<a ui-sref="{{ crumb.route }}" ng-if="!$last">{{ crumb.displayName }} </a><span ng-show="$last">{{ crumb.displayName }}</span>
<i ng-hide="$last" class="material-icons">keyboard_arrow_right</i>
</li>
</ol>
</div>
stateprovider example
.state('apps', {
url: '',
views: {
'content@': {
templateUrl: 'index.html'
}
},
data: {
displayName: 'Application'
}
}