Menu

Guidelines

Guidelines

The navigation menu is an essential part of your application. It offers a way to directly navigate to the main application parts and it can give your users access to legal and version information, and access to settings.

1. Expand/collapse icon button: Expands and collapses the navigation menu.
2. Avatar button: Shows the logged-in user and provides access to user-related actions (optional)
   Please note: Only basic navigation and map navigation still use the avatar at this position. The new application frame uses the avatar inside the application header.
3. Navigation section: Navigates through the main parts of an application.
4. Bottom section: Hosts infrastructural actions and additional content but does not navigate away from the selected main part.

Avatar button

The avatar button is optional. It shows information about the logged-in user. When collapsed it shows only the avatar, and when expanded it shows additional user information. A dropdown menu with user-related actions appears when selecting (note the available actions are specific to each application). The log out item is available by default.
Please note: Only basic navigation and map navigation still use the avatar in the navigation menu. The new application frame uses the avatar inside the application header.

Avatar button options

• top: Defines the first line of the additional user information. We typically use this to show primary user information (first and last name or username), depending on the available information. Overflows are clipped with an ellipsis (...).
• bottom: Defines the second line of additional user information, used to show secondary information, for example user role. Overflows are clipped with an ellipsis (...).
• initials: Shows avatar with initials.
• image: Shows avatar with images.

Menu item and menu category

Menu items represent the main parts of an application. They have an icon for quick visual identification. When the navigation menu is expanded, the full name of the item is visible.

Menu categories can host menu items as a second navigation level.

1. Selected item
2. Item with notification
3. Unselected item
4. Menu category, holds menu items as a second level navigation (on selection, the second level items appear)
5. Second level navigation menu, appears when navigation menu is collapsed
6. Second level navigation expanded inline, appears when navigation menu is expanded

7. Menu category appears selected if one of its children items is selected
8. When second level menu items are visible, the currently selected item also appears selected

Second level items with icons in collapsed (9) and expanded (10) navigation menu

We usually don’t use icons on the second navigation level as in most cases it won’t add any value for users. But it is allowed to use icons if it helps users to better understand and recognize the items. Don’t mix items with and without icon within a category.

Options of menu items and menu category

• Notifications: Displays a number at the top right corner of the icon (2).

Bottom section

Items in this section do not navigate away from the current content. They either toggle states, e.g. light and dark mode, or open a layer over the current content. This means users do not lose their current workflow by interacting with these items.

1. Settings: Opens the settings overlay.
2. Toggle theme: Toggles between light and dark themes.
3. Custom item
4. About & legal information: Opens the about & legal overlay to display legal information, release notes, license information, etc.
5. Collapse/expand side panel: Only relevant for map navigation.

Navigation menu options

• enableSettings default: true: Shows the settings icon (gear wheel) in the bottom section, it opens the settings overlay and the content can be freely defined.
• enableToggleTheme default: false: Shows the theme toggle icon, offers an easy and direct way to toggle between light and dark themes. We don’t typically use this when dedicated theme settings are available elsewhere, e.g. in the settings overlay.
• enableMapExpand default: false: Only relevant for map navigation, shows an icon that expands/collapses the side panel of the map navigation.

See the code tab for more information and other options available.

Behavior

• Navigation menu expands and collapses with a transition.
• The width of the collapse and expand state are fixed and cannot be configured.
• The number of menu items can overflow, this is recognizable by the shadow at the bottom and/or top.

Dos and Don’ts

• Do use icons in second-level navigation items when it helps users to better understand and recognize them
• Don’t mix menu items with and without icons within a second-level navigation category
• Don’t place non-navigational items in the navigation section
• Don’t place navigation items in the bottom section as items in the bottom section must not navigate away from the current context

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

2nd navigation level

Since 2.0.0

PreviewAngularReactVueJavaScript

Avatar

PreviewAngularReactVueJavaScript

Bottom tabs

Caution: Since the old implementation using the bottom property on menu items had some problems and will not work anymore, please use slot="bottom" instead.

PreviewAngularReactVueJavaScript

API (ix-menu)

Properties

Name

Description and specifications

applicationDescription

Should only be set if you use ix-menu standalone

Attribute:

application-description

Type:

string

Default:

''

applicationName

Should only be set if you use ix-menu standalone

Attribute:

application-name

Type:

string ｜ undefined

enableMapExpand

Internal

Attribute:

enable-map-expand

Type:

boolean

Default:

false

enableSettings

Is settings tab is visible

Attribute:

enable-settings

Type:

boolean

Default:

true

enableToggleTheme

Show toggle between light and dark variant. Only if the provided theme have implemented both!

Attribute:

enable-toggle-theme

Type:

boolean

Default:

false

expand

Toggle the expand state of the menu

Attribute:

expand

Type:

boolean

Default:

false

i18nCollapse

Attribute:

i-1-8n-collapse

Type:

string

Default:

'Collapse'

i18nExpand

Attribute:

i-1-8n-expand

Type:

string

Default:

' Expand'

i18nExpandSidebar

Accessibility i18n label for the burger menu of the sidebar

Attribute:

i-1-8n-expand-sidebar

Type:

string

Default:

'Expand sidebar'

i18nLegal

Attribute:

i-1-8n-legal

Type:

string

Default:

'About & legal information'

i18nSettings

Attribute:

i-1-8n-settings

Type:

string

Default:

'Settings'

i18nToggleTheme

Attribute:

i-1-8n-toggle-theme

Type:

string

Default:

'Toggle theme'

maxVisibleMenuItems

Deprecated

- Has no effect on component. Will get removed with next major release (v3)

Maximum number of menu items to show in case enough vertical space is available. Extra menu items will be collapsed to 'show more' menu item.

Attribute:

max-visible-menu-items

Type:

number

Default:

9

pinned

Menu stays pinned to the left

Attribute:

pinned

Type:

boolean

Default:

false

showAbout

Is about tab visible

Attribute:

show-about

Type:

boolean

Default:

false

showSettings

Is settings tab visible

Attribute:

show-settings

Type:

boolean

Default:

false

startExpanded

Since 2.2.0

If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.

Attribute:

start-expanded

Type:

boolean

Default:

false

Events

Name

Description and specifications

expandChange

Menu expanded

Detail:

boolean

mapExpandChange

Map Sidebar expanded

Detail:

boolean

openAppSwitch

Since 3.0.0

Event emitted when the app switch button is clicked

Detail:

void

API (ix-menu-item)

Props

Name

Description and specifications

active

State to display active

Attribute:

active

Type:

boolean

Default:

false

bottom

Caution: this is no longer working. Please use slot="bottom" instead. Place tab on bottom

Attribute:

bottom

Type:

boolean

Default:

false

disabled

Disable tab and remove event handlers

Attribute:

disabled

Type:

boolean

Default:

false

home

Move the Tab to a top position.

Attribute:

home

Type:

boolean

Default:

false

icon

Name of the icon you want to display. Icon names can be resolved from the documentation

Attribute:

icon

Type:

string ｜ undefined

label

Since 2.2.0

Label of the menu item. Will also be used as tooltip text

Attribute:

label

Type:

string ｜ undefined

notifications

Show notification count on tab

Attribute:

notifications

Type:

number ｜ undefined

tabIcon

Deprecated

since 2.0.0 use `icon` property. Will be removed in 3.0.0

Name of the icon you want to display. Icon names can be resolved from the documentation

Attribute:

tab-icon

Type:

string ｜ undefined

Events

No events available for this component.

API (ix-menu-category)

Properties

Name

Description and specifications

icon

Icon of the category

Attribute:

icon

Type:

string ｜ undefined

label

Display name of the category

Attribute:

label

Type:

string ｜ undefined

notifications

Show notification count on the category

Attribute:

notifications

Type:

number ｜ undefined

Events

No events available for this component.

API (ix-menu-avatar)

Properties

Name

Description and specifications

bottom

Second line of text

Attribute:

bottom

Type:

string ｜ undefined

i18nLogout

Use for translation

Attribute:

i-1-8n-logout

Type:

string

Default:

'Logout'

image

Since 1.4.0

Display a avatar image

Attribute:

image

Type:

string ｜ undefined

initials

Since 1.4.0

Display the initials of the user. Will be overwritten by image

Attribute:

initials

Type:

string ｜ undefined

showLogoutButton

Since 2.1.0

Control the visibility of the logout button

Attribute:

show-logout-button

Type:

boolean

Default:

true

top

First line of text

Attribute:

top

Type:

string ｜ undefined

Events

Name

Description and specifications

logoutClick

Logout click

Detail:

any

API (ix-menu-avatar-item)

Properties

Name

Description and specifications

icon

Avatar dropdown icon

Attribute:

icon

Type:

string ｜ undefined

label

Avatar dropdown label

Attribute:

label

Type:

string ｜ undefined

Events

Name

Description and specifications

itemClick

Avatar dropdown item clicked

Detail:

MouseEvent