Certainly navigation is one of the most common features that we have to implement while creating a web application. In this section, we’ll consider one of the possible ways to do it.
The implementation is based on two components: app-route and iron-lazy-pages.
-
app-routeis used to analyze URL currently opened in the browser. -
iron-lazy-pagesmanages what page with which content should be opened.
Below is a simple example demonstrating how the result of using these elements might work. It’s put in <iframe/> because
we have to change current location in order to show how navigation works.
Navigation example
Code in iframe
link:../../../source/polymer-build/app-with-navigation.html[role=include]Polymer element implementing navigation
link:../../../source/polymer-build/src/recipes/navigation/thermodynamic-laws.html[role=include]Navigation can contain multiple levels. It can be achieved with the help of the same app-route and iron-lazy-pages components. In the example below, click on the "Paper Elements" link and you will be presented with the second level of navigation.
2-level navigation
Source code:
link:../../../source/polymer-build/src/recipes/navigation/polymer-elements-registry.html[role=include]link:../../../source/polymer-build/src/recipes/navigation/paper-elements-registry.html[role=include]The same method can be used to create any navigation tree.