Design Assetslink

You can access the Finastra design sytem UI Kit that contains the assets (patterns and components) related to the global navigation by clicking on the button below.

User flowslink

Watch this video for a quick tour of the Global Navigation pattern and its related components.

White labellinglink

You can brand the global navigation easily using Finastra's design system theme editor.

Responsive Layoutlink

See below how the global navigation behaves in different screen widths.

Side navigation and Icon bar navigation

Global Navigation Structurelink

Here is what a global navigation comprises. After login, the launch page displays a welcome message with available apps, tools or resources based on user's access rights. From within an app, users can return to the welcome page, switch between applications, search or access contextual help.

At any point in the journey, users can switch apps, return to the welcome screen, search or access contextual help.

Overviewlink

Launch pagelink

This welcome page allows users to access available apps, tools and resources. For example, it can direct to onboarding and getting started content.

Applink

An application contains a home page, one or multiple views, app bar and side navigation.

Home pagelink

It is a good practice to display an app homepage to provide users with an app summary, key metrics, onboarding, documentation and other relevant content.

Depending on your user goals, your app homepage can focus more on:

• Getting started videos and training
• 360 degree overview of the day: key metrics, tasks to be done, etc.
• Combination of both

Inside app navigationlink

To navigate between different views of an app, you can combine tabs in the top app bar and a side navigation.

The side navigation can be collapsed by default or displayed as an icon bar. An icon bar is used to quickly toggle between different app views.

An item of the side navigation could also contain an additional level of sub-items.

App barlink

At the top, the app bar provides access to search, notifications, help, pages of the app, user profile and more. From the app bar, users can also switch to another available app or go back to the launch page.

The app bar can contains:

• Search
• Notification center
• Help
• App-switch
• User profile
• More tools and resources

App bar variants

These are possible ways to customize the app bar:

• Display search as an icon, a small or a large input field
• Add more options in the more icon
• Show most frequent actions as primary button
• Display up to 3 tabs for app to group pages under 2 to 3 categories
• Use transparent background

Tabs in app bar vs tabs in the content area

• Tabs integrated in the app bar are global tabs. Use them to switch to entiry different view.


• Tabs in the main content area affect only the context of the main content area. Use them to switch between views that are related.

Side navigationlink

The side navigation gives access to different views within an app. The side navigation comprises an icon bar and a side panel

By default the icon bar is collapsed. Clicking or tapping the expand icon at the bottom left-hand corenr, the side panel. The side panel is a quick summary of the app view. It helps display a key metric at a glance, without having to update the main content, displays additional level of navigation or related links.

Side panel customization

You can customize the side panel with different content, such as:

• App logo, key metric


• Related links, action button, banner