EG Xena Developer
WebsiteSign inDesign System
  • Introduction
  • The possibilities
    • Best practices
    • User experience
  • Development
    • Get started
      • Become a developer
      • Register your app
      • The Xena API
      • Authorization
      • Using OAuth
      • Using Xena Api with OAuth
      • Using WebHooks
      • Using Websync
      • Using Xena API Key
      • Creating plugins
    • Samples
    • API documentation
      • Xena
      • Cars (Giulia)
      • Articles & prices (Gaia)
  • User interface
    • Xena Design System
    • Use our stylesheet
    • Design Guide
      • Alerts and warnings
      • Buttons
      • Colors and fonts
      • Collapsible
      • Dropdowns
      • Forms
      • Icons
      • Layout
      • Modals
      • Navigation
      • Pagination
      • Panels
      • Tables
      • Other components
Powered by GitBook
On this page
  1. User interface
  2. Design Guide

Navigation

There are different options for navigating in views.

PreviousModalsNextPagination

Last updated 5 years ago

The primary navigation is, of cause, the main menu with its second level navigation (1). Another common navigation is lists in views (3) and tabs in top of panels (2). If beneficial for the end user, you can also have navigation inside a panel (4).

Area

Description

Main menu, first level (1)

This is for main sections (not individual views) and groups multiple related views/apps. This menu item has an icon.

Main menu, second level (1)

This is the sub sections or specific views of the first level main menu. This menu item has an icon.

Main menu, third level (1)

The is more rarely used but can be efficient for providing a kind of shortcut to functions or "latest used" items. This menu item has no icon.

Tabs (2)

This is for shifting between content in the same panel. Has no icon.

Lists (3)

Often presented in tables with links. This guides the user to items or other areas in the application. Most often this have no icon.

Can also be used as a "split view" navigation, where clicking the link will present new content on a part of the page.

Navigation panel (4)

Be cautious – making too much navigation, can be confusing to the end user. Less is more. However, a navigation panel inside a pane gives room more options.

Illustration of the four different navigation areas.