Example Lateral, Forward & Reverse Navigation in Desktop Applications

Question

I'm researching Material Design in how it's related to layer based navigation.

Navigational directions Based on your app’s information architecture, a user can move in one of three navigational directions:

Lateral navigation refers to moving between screens at the same level of hierarchy. An app’s primary navigation component should provide access to all destinations at the top level of its hierarchy.

Forward navigation refers to moving between screens at consecutive levels of hierarchy, steps in a flow, or across an app. Forward navigation embeds navigation behavior into containers (such as cards, lists, or images), buttons, links, or by using search.

Reverse navigation refers to moving backwards through screens either chronologically (within one app or across different apps) or hierarchically (within an app). Platform conventions determine the exact behavior of reverse navigation within an app.

Does anyone know of any online examples of a mobile and desktop app that demonstrates this?

We see it in mobile app design everywhere, that's prolific. But how those layers translate between mobile to desktop layout is what I cannot find examples of.

Update:
I thought I'd add the Book Lover App by Hoang Nguyen as a mobile-based example.

You can see that these navigations are layers, where the back arrow is "upward" navigation to the page behind this book details layer. With the advent of PWAs we're going to see a LOT more of this in non-native design.

So how does this example translate to desktop size screens?

Update 2
I'm starting to believe that layered navigation, as it is explained in Google's spec, is meant for native mobile and installable web apps where the browser's back/forward buttons no longer exist and we developers are responsible for integrating them.

Answer 1

This could be broken up into two pages. A category page for the book listings and a single page view for the book details with a back button at the top left.

You could maintain the category scrolling component as a carousel at the bottom/top of the details view for quick access to another book. This could be used to show related books or books customers also bought.

A good example of the two-page approach would be iTunes Charts page for books

Category View

Details View

Another option could be to use an accordion (https://jqueryui.com/accordion/) to reveal the book content if you want to keep everything on the same page.

A good example of this type of paradigm on Desktop would be Netflix.

Category View

Details View

Answer 2

Navigation is normally designed based on the information architecture of your application, so I think you'll find that there are plenty of examples used in desktop applications due to the more complex information hierarchy afforded by the different types of interactions possible (e.g. mouse, touch, keyboard) and the larger screen space to cater for the interface design.

The most common example are transaction based applications that have either a classic 'wizard' style of forward and reverse navigation (through defined steps in a process) as well as the ability to jump out of the flow (by saving or cancelling) and into a different process (which is your lateral navigation).

This would be similar to web based applications that have e-commerce or shopping cart functionalities that people are familiar with on both mobile and desktop applications (which have similar look and feel).

Complex desk applications such as those used in specialist fields (UX design also being one of them) will have quite specialized workflow that also incorporate these types of navigation patterns, such as design tools that work by allowing you to select a particular feature from a 'toolbar' style menu panel in which you can navigate through hierarchies (usually by hovering or using shortcut keys) and forward or reverse in the menu the same way.