Breadcrumbs

[andrew-frueh]

Breadcrumbs are a graphical control element used as a navigational aid within our app subheader #43. It allows users to keep track of their location within the current application. Our breadcrumbs thus far always appear on the left side of the subheader. See below for overall styling:

[andrew-frueh]

I got a start on the styling at least of this one when I was putting #108 together. So I'll sign up to take a first stab at this component. I might schedule a quick phone call next week for all interested to talk through the inputs, parameters, etc for this. I could write it pretty easily to accept an array of what should go in the breadcrumb list - but I'd be curious if there is a more elegant way to do it. Like is does Angular maintain a navigation stack that we could referencing instead? Would be great to talk that all through.

[andrew-frueh]

Hi all, I've given some thought on how to approach the breadcrumb component, and I wanted to see what you all thought. This is how I'm thinking the markup would look:

<hc-breadcrumbs> <a href="">Home</a> <a href="">Second Page</a> <span>Current Page</span> </hc-breadcrumbs>

I'll use the css :after tag to insert the arrows in between the anchors. For responsiveness, I was thinking that when the page gets down to phone size (not tablet), I'll have the breadcrumbs turn into a "< Back" button to save real estate. But if we're at the root of the breadcrumb nav tree, I'll just display the current page name instead of a back button.

Thoughts?

[jtrujill]

Breadcrumb should be even easier than that dom-wise. You'd need to write a component that uses the activatedRoute and router to recursively visit the root component to the current component. So really the only thing that should be required of a user of breadcrumbs is deciding where to place it. <hc-breadcrumbs></hc-breadcrumbs>

We have two options for setting the label for the routes. We can use custom data on the route configuration

const routes: Routes = [
  {
        path: "hola",
        component: HolaComponent,
        data: {
          breadcrumb: "Hola"  <---- custom breadcrumb label
        }
  }  

or we could use a service or even a combo of the two.

[andrew-frueh]

Thanks @jtrujill, that's helpful direction - I was hoping there might be something like that. Found a demo that looks to be very similar to what you're suggesting. I'll give this approach a go.

[andrew-frueh]

Oh, and I like the idea of using custom data on the route configuration - that's how that demo project I linked to is doing it as well.

[petermcclanahan]

I agree with @jtrujill -- that's similar to how we did it in Atlas. We used a resolver to add custom data dynamically to the routes.