Skip to content
Branch: master
Find file History
Latest commit a401ea1 Jun 26, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
Assets add new navigation example Jun 23, 2017
Components better file structure Jun 23, 2017
Pages remove todos Jun 26, 2017
AppMenu.ux remove todos Jun 26, 2017
ApplicationTop.ux add new navigation example Jun 23, 2017
MainView.ux remove todos Jun 26, 2017
Navigation.unoproj add new navigation example Jun 23, 2017 add new navigation example Jun 23, 2017
description.yaml add new navigation example Jun 23, 2017


Multi-level application navigation using an edge menu, a title area, an action bar.


The first navigation level is created by a EdgeNavigator in MainView.ux to control the side menu. This doesn't participate in the Router navigation but instead uses signals.

ApplicationTop.ux creates the next levels of animation, it is the root level for the Router. All pages have a title bar; those in home have an additional action bar at the bottom.

The application uses goto to get to any page within home and push to get to all others. This limits the overall application depth to avoid confusing the user.

Flights Page sub-navigation

The FlightsPage.ux has another level of navigation for "arrivals" and "departures". This is controlled via the router but exposed as more of a filter to the user at the top of the page. By making this proper router paths the side menu is able to navigate directly to either sub-page.

Bookings sub-pages

The BookingsPage.ux displays a list of bookings (in a real app you'd obviously want to load this list). A top-right corner icon uses the router to push the createBooking page. Clicking on individual items will push the booking page for that item.

Note that only the id is passed to the booking page. That page is responsible for looking up information based on that id, usually via a common JavaScript module.

You can’t perform that action at this time.