uiBreadcrumbs: Dropdown within the breadcrumbs?

[ryananthonydrake]

Hi Michael,

I saw this Stack Overflow question asking about a dropdown in the breadcrumbs, and I too was also wondering if this is something that may be implemented?

StackOverflow question you responded to: http://stackoverflow.com/questions/21970406/how-to-make-automated-dynamic-breadcrumbs-with-angularjs-angular-ui-router

[michaelbromley]

Hi,

Can you describe the specific functionality you envisage? To be honest, I am no longer working on the project which gave rise to the uiBreadcrumbs module, so I'm probably not going to get the time to implement any new functionality right now.

However, I can also give a suggestion on how to go about implementing it, and maybe you or someone else wants to try doing it.

[ryananthonydrake]

Hi Michael,

Yes, so the specific function I envision would be to add a dropdown within the breadcrumbs that would then allow the user to navigate to child values of that parent.

As an example, say you had brands > campaigns for marketing. You might have Coke, Pepsi, Mountain Dew in the dropdown with different marketing campaigns under each of them.

<md-select ng-model="vm.selectedBrand" aria-label="Brands" placeholder="Select a brand">
                <md-optgroup label="Brands">
                    <md-option ui-sref="brands.detail.campaigns({ brandId: {{::bra.id}} })" 
                        value="{{bra.name}}" 
                        ng-repeat="bra in vm.brands">
                        {{bra.name}}
                    </md-option>                        
                </md-optgroup>
            </md-select>             

So you'd see the brand names in the dropdown and clicking on one would change the routing and then navigate you correctly to the campaigns page with the correct breadcrumbs.

Hope that makes sense and you could provide suggestion/s as to how best to do this!

[michaelbromley]

Okay, I had time to think about this briefly now. The central problem to solve is "how do we get the child states of a given state?"

The current implementation relies on the fact we can use $state.$current.parent to get the parent of the current state. If we keep doing this all the way up the tree, we get our breadcrumbs.

However, in order to get the children of the first parent, we'd need something like $state.$current.parent.children. Unfortunately there is no such method available. So here is a way it could be done - read this StackOverflow answer.

Basically, we can use $state.get() to get an array of all the states. Then it is a matter of using some pattern matching to identify which are the children of a given state. So in your example, let's say we are in the state campaigns, and we want to list the various children of the parent brands state.

So we can use $state.get() and we'll get an array of objects, something like this (this is simplified):

[
  {
    name: "brands"
    templateUrl: "app/brands/index.html"
    url: "/brands"
  },
  {
    name: "brands.coke"
    templateUrl: "app/brands/c.html"
    url: "/coke"
  },
  {
    name: "brands.pepsi"
    templateUrl: "app/brands/p.html"
    url: "/pepsi"
  },
  {
    name: "brands.mountainDew"
    templateUrl: "app/brands/md.html"
    url: "/mountain-dew"
  },
  {
    name: "contact"
    templateUrl: "app/contact/contact.html"
    url: "/contact"
  }
]

So then we just need to take the state name - "brands" - and filter the states array for any of those which have a name matching ["brands" - period - something]. (Bear in mind that ui-router also allows you to define parent-child relationships in a different way too, not relying on the period convention. In that case a different strategy would be needed, but might be even easier).

So now you have solved the biggest challenge, the rest is a matter of figuring out the implementation problems that come up.

Hope that helps, and if you implement this, I'd be very interested to see it!

[michaelbromley]

Closing. Please re-open if this is still an issue.

[dannygoncalves]

I'm working on an implementation @michaelbromley apparently Ryan made his own solution, but it's kind of difficult with the uiBreadcrumbs structure.