(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Navigation Placement

Navigation in Edge.One is divided into two navigation templates. The global navigation and the local navigation. Edge.One's navigation is configurable, allowing a product to choose which header components and configurations meet their user and information requirements. Simple products have the flexibility to use only Global Navigation, while more complex products use a combination of Global and Local Navigation to match the depth of their navigation.

navigation-compare.png

Global Navigation

The global navigation of EdgeOne Inspire consists of three basic elements. A home dashboard in the UPW (Unified Production Workplace) is the center of all navigation paths. The user always starts from the home dashboard and navigates further into the apps via multiple dashboards. Multiple apps can form one process. The ubiquitous back navigation feature allows the user to return to the previous dashboard. The user can navigate back to the home dashboard at any time using the logo.

global-list.png
global-hamburger.png

• 01 - Navigation Panel
• 02 - Dashboard Header

Dashboard Header

Anatomy

dashboard-header-anatomy.png

• 01 - Hamburger menu The hamburger icon is used to open application navigation such as the left panel.
• 02 - Position action bar This action bar is intended for datepicker and breadcrumb only. Content of this action bar depends on the content.
• 03 - Dashboard title The header name should be the name of the parent domain and be as brief as possible while giving the user a sense of place.
• 04 - Product logo For Edge.One products, the header name is always preceded by “Edge.One”
• 05 - Header action bar These utilities are reserved for universal, system-level functions such as profile, search, notifications, and similar functions. Not every product on a system is required to show the same utilities, but it is recommended for a better cross-product user experience.

Alignment

dashboard-header-alignment.png

Action bar

The action bar always consists of the same actions within the global navigation.

dashboard-header-action-bar.png

• 01 - Global Search Most searches start with a broad search, the scope of which can be narrowed using filters.
• 02 - Profile and System Settings The settings items are listed in an overflow list. The contents may differ from user to user
• 03 - Notifications

Navigation Panel

Anatomy

The navigation panel must always be placed on the left side of the dashboard and always consists of the same primary asset sets (1,2,3,6). The number of dashboard groups may vary. The dashboard groups may consist of simple sub menus and sub menu groups. Sub menu groups are always recognizable by the expand/collapse icon.

navigation-panel-anatomy.png

• 01 - Close Icon For the closeing of the navigation panel.
• 02 - Resize icon Icon for the individual sliding of the navigation panel.
• 03 - Dashboard group Group of sub-menus form a dashboard group.
• 04 - Dashboard group overline Each dashboard group must always be titled by an overline.
• 05 - Sub-menu Basic link element for the menu.
• 06 - Tool group Tools groups contain sub-menus that link to different tools or services. the number of tools links may vary from user to user.

Alignment

navigation-panel-alignment.png

Responsive Behaviour

The header always remains the same in its position and function. In all horizontal representations of the header, the position and number of contents are always the same. In all vertical representations of the header, the header's position remains the same, but content may be moved from the global navigation to the local navigation.

responsive-behaviour.png

Local Navigation

Local navigation does not need to be everywhere in the Edge.One UI. Simple applications do not require local navigation. As soon as a dashboard requires e.g. nodes, dependencies, favorites or subdashboards, this must be placed in the local navigation. The local navigation always controls only the current dashboard and can vault from dashboard to dashboard.

The dashboard navigation boardlet has two display options, Collapsed and Extended. This is necessary to keep the focus on the content of the dashboard. Form and presentation within a breakpoint are always the same and must not be changed.

local-navigation-table.png

Collapsed Dashboard Navigation Boardlet

The Collapsed Dashboard Navigation Boardlet always has the same proportions and is located on the left side of the dashboard. The content can vary from dashboard to dashboard and is represented by an action icon. The action icon opens an overflow menu where all thematic actions are listed. In case the customer wants to place his logo inside Edge.One this is only possible in the navigation boardlet.

collapsed-dashboard-navigation-boardlet.png

• 01 - Extender The Action Icon for extend and collapse the navigation boardlet.
• 02 - Divider A divider helps the user to differentiate between several action icons that have a different content and function.
• 03 - Content Actions These actions are variable and can be selected by the user/creator.
• 04 - Client Logo In case the customer wants his own logo, it will be placed only here. Only signets or rectangular logos are allowed
• 05 - Overflow Action Link The number of links and the content of the link are variable.
• 06 - Overflow Menu The overflow menu contains all thematic actions. It opens only to the right.

Anatomy

collapsed-navigation-boardlet-anatomy.png

Alignment

collapsed-navigation-boardlet-alignment.png

Extended Dashboard Navigation Boardlet

The Extended Dashboard Navigation Boardlet always has the same proportions and is located on the left side of the dashboard. The content can vary from dashboard to dashboard and is represented by a Navigation Asset. Currently there are four different navigation assets. A link list, node list, map list or conflict list. The number and arrangement of the assets can be varied freely. However, we recommend not to use more than three navigation assets in combination, otherwise space problems may occur.

In case the customer wants to place his logo inside Edge.One this is only possible in the navigation boardlet.

extended-dashboard-navigation-boardlet.png
extended-dashboard-navigation-boardlet-table.png

Anatomy

extended-navigation-boardlet-anatomy.png

• 01 - Extender The Action Icon for extend and collapse the navigation boardlet.
• 02 - Divider A divider helps the user to differentiate between several action icons that have a different content and function.
• 03 - Link List Assets
• 04 - Node-List Assets
• 05 - Card-List
• 06 - Client Logo In case the customer wants his own logo, it will be placed only here. Only signets or rectangular logos are allowed
• A - Navigation Asset
• B - Content of a navigation asset The content can vary, see overview navigation asset.
• C - Overline of a navigation asset Overlines can be used with or without an action bar.

Alignment

extended-navigation-boardlet-alignment.png

Responsive Behaviour

The navigation boardlet always remains the same in its position and function within a breakpoint. Content can vary from breakpoint to breakpoint. In all landscape displays the navigation boardlet is on the left edge, in portrait displays it is always on the bottom. As soon as the navigation boardlet is displayed on the bottom, the boardlet is displayed without white background and shadow. this is important so that the boardlet does not distract from the content. From the breakpoint Tablet_max the navigation boardlet is no longer expandable.
responsive-behaviour.png

Breadcrumb

Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step. The breadcrump is always located in the left part of the header, it can be expanded or collapsed as needed. this is important so that the header is always clear for the user and the breakcrump does not play a primary role in all applications.

When to use

Breadcrumbs are effective in products and experiences that have a large amount of content organized in a hierarchy of more than two levels. They take up little space but still provide context for the user's place in the navigation hierarchy.

When not to use

Breadcrumbs are always treated as secondary and should never entirely replace the primary navigation. They shouldn't be used for products that have single level navigation because they create unnecessary clutter.

Anatomy

Breadcrumbs are placed in the upper left area of the page. They are located inside the header. The breadcrumb must always be placed in the header as a primary element of the global navigation. Once the user leaves the homeboard, the breadcrump must have a back arrow. With this arrow the user can navigate back step by step.

breadcrumb-anatomy.png

• 01 - Go back icon With the action icon the user can navigate back step by step.
• 02 - Breadcrump icon With this icon the user can expand and collapse the breadcrump.
• 03 - Breadcrump link Directs users to the parent-level page.
• 04 - Separator Clearly distinguishes between each page.

Behaviour

All pages in the breadcrumb component should be interactive and link to the corresponding pages. The go-back icon can only go back one step in the page structure at a time.

Mouse

Users can trigger an element by clicking on a breadcrumb page link. The separators between page links are not interactive.

Keyboard

Users can navigate between breadcrumb links by pressing Tab and Shift-Tab. Users can trigger a breadcrumb link by pressing Enter while the link has focus.

Modifiers

By default, the Inspire breadcrumb must not be placed expanded in the header. It must always be expanded by the user as needed. This is important so that the header retains its tidy and clear design. In case of complex navigation or linking, the breadcrumb must also be expanded by default.

breadcrumb-modifiers.png

Navigation from Table

The next level navigation from a table are always through the content/subject/items represented in the column(s) as a 'Clickable link'. The content can vary from table to table and clicking on the same will navigate the user to it's next level/drill down/details page. In case the user wants to navigate back to the table to drill down into another content, this can be done through the 'back' icon available in the breadcrumbs in the header.The content in the table cell will behave as a normal clickable link in all the different pre-defined states.

navigation-from-table.png

• 01 - Clickable cell item Subject/Item represented as a clickable link in the table cell to navigate to it's details page (next level)
• 02 - Clickable actions Actions available in the actions column will be used to perform action/update at the same level itself.