Where to put initialization code for a reusable Salesforce Lightning Component?

Question

I have built a reusable vertical navigation component. I plan on using this component across multiple pages and don't know where I am supposed to put the initialization code, which will set the menu headers and items. Obviously, if I do this in the component controller itself, it will be the same across all pages I use it on, so I need a way of setting page-specific initialization attribute values.

In traditional web app development, one could pass the initialization data through a page-level controller model, but how does one accomplish the same in a autonomous Lightning Component, such as the navigation component I referenced above?

I need to be able to set the items values differently, depending on the page the component is added to. It seems that I need to set the values externally from the component itself.

Answer 1

You should use design attributes for your component bundle

This way you can set different attributes for each component instance - and this is for app builder and for community builder

Answer 2

Simply assign the value you want to use in the parent component to the items attribute of your component, and the framework will render your menu appropriately.

---

Any initialization you may need to do internally can be done using aura:valueInit:

<aura:handler name="init"
                      value="{!this}"
                      action="{!c.doInit}"/>

And define it in your controller:

({
    doInit: function(component, event, helper) {
        component.set("v.items", ...)
    }
})