Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.


Enriching the hybrid navigation by adapting to a native behaviour.

Hybrid anatomy

The communication between the native application and web view is limited. The native app loads the web view in a container. The native navigation bar is shown in order for the user to get back from the web view. The navigation bar can either show a back button or a close button, see example below for how this will look in iOS and Android.

Hierarchic or modal navigation

The native app can present the web view either hierarchically or modally.

  • Hierarchical navigation is used when the user navigates different levels of a structure, for example from a list view to a detail view. The native navigation bar will in this case show a back button.
  • Modal navigation is used when the user needs to finish a task or a flow. In this case the native navigation will show a close button.

See examples of the two below.

Hierarchial navigation

Above: Image

Above: Animated

Modal navigation

Navigate less

Since the native navigation bar will be shown at all times, navigation inside the web view can become confusing. For this reason we try to keep navigation inside the web view to a minimum. When navigation is needed it is important that the user understands where they are, where they can go and how they can get back.

Use breadcrumbs

When using hierarchical navigation in the web view the user should be able to navigate up by using breadcrumbs. The breadcrumb will display the title of the page the user can get back to, see example below. Swiping back on iOS or using the device back button on Android should have the same behaviour as the breadcrumb.

When the web view includes hierarchical navigation it will be shown modally in the native app, not to confuse the breadcrumbs with the back button in the native navigation bar.

Avoid full screen navigation

Full screen modals in a hybrid experience should not be used since the close action will collide with the native navigation bar. Replace the full screen modal with a modal that doesn’t fill the viewport, such as the slide-up sheet, see example below.

Example of a flow with hierarchical and modal animation

Do's and don'ts


  • Navigating back should display the view as the user left it, including scroll position and inputted data
  • Back gestures such as swipe to go back and device back buttons need to be supported
  • External links are always opened in the mobile (iOS/Android) browser. To indicate this they must show the “external-link” icon from Font Awesome library at the end of the actual link text
  • Assets that are part of the chrome UI (such as menus, footer, zone 3 etc.) intended for standalone web must be hidden whilst in a native context


  • Use content or experience-driven navigation so the user can navigate from the web view to something completely different
  • Show native back button together with breadcrumbs
  • Repeat information in each view, keep in mind where the user came from


Page last updated


Was this helpful?