...
As written in the PlatformUI technical introduction, the Navigation Hub gives access to 4 navigation zones and those zones which have a set of navigation items. Each Navigation Item is actually a View in the Navigation Hub which can generate one or several more links in the menu. Most Navigation Item Items can even be seen as a View of a given application route. A Navigation Item View is also responsible for handling its selected state. This means that the Navigation Items are notified when the application matches a new route and the view can then decide to react accordingly.
...
- the base implementation is
Y.eZ.NavigationItemView
. When the matched application route changes, it sets its selected state if the navigation item route name matches the name of the new matched route in the application - the
Y.eZ.NavigationItemParameterView
implementation adds a check on a route parameter. So to appear selected, the route names must match and a given route parameter should be the same in both the application matched route and in the route the view is representing - the
Y.eZ.NavigationItemSubtreeView
also adds a match on a route parameter, but in this case , it considers theid
route parameter and checks whether the matched id in the application route is a descendant of a given Location id.
...
Now that we have plugin plugged in the Navigation Hub View service, we can change the menu structure. Amongst Among others methods, the Navigation Hub view service has a an addNavigationItem
method to add a navigation item in a given zone, so we can use it in our plugin to add a new item:
...
At this point, if you refresh you browser, you should see a new entry in the Content zone called List contents. Clicking on this link should even get you to the page defined in the previous step. And you can also notice that the navigation item gets a special style (a green bottom border) when the eZConfList
route is matched and that it looses loses this style if you navigate somewhere elseelsewhere.
Tip | ||
---|---|---|
| ||
The resulting code can be seen in the 5_navigation tag on GitHub, this step result can also be viewed as a diff between tags The next step is then to build and display the content list. |