Developing such a task requires few extensions according to the MVC pattern with C# for the model, Razor for the Views and AngularJS for the designer logic.
1) Extend the Breadcrumb model to include the value which you would like to be displayed, and register the new model using dependency injection in Global.asax file.
You can use the example here:
2) Extend the view of the breadcrumb widget to display that property from the model
The name of the View is Breadcrumb.cshtml and it should be located under Breadcrumb folder.
The file should be located under SitefinityWebApp/Mvc/Views/Breadcrumb
Refer to the link for more info:
3) Extend the designer view cshtml to display the dropdown following the same pattern for the view with DesignerView.Simple.cshtml
An example is provided here:
You can see how a dropdown is developed here:
File should be based on designerview-simple.js of the breadcrumb.
You can use see how the widgets are developed here and use it as a reference
In order to persist the value, you must create two watches:
1.One which takes the selected value and transfers it to the angular scope.
2.One which takes that change of the scope and transfers it to the selected value.
You can find the example in the following link:
Look for the section under "Next, you add the following code in the designer's controller:"
By default, the way to persist the values requires the property to be in the C# controller of the widget. (That is the default behavior of the property service in the designer view, which transfers the values)
Unfortunately, there is no direct way to modify the controller of a built-in widget.
The easiest approach would be to use the extension:
Copy the PropertyDescriptors folder, and install the classes in the global.asax, as described in the link.
This allows to get the properties of the model directly in the designer.