Used as the main navigation for our platform on the web, the sidebar has a fixed position to the left of the screen and takes up the full height of the browser viewport.

More information is available in our section on navigation patterns.

Anatomy

Altough it acts as a single component, it can actually be divided up into:

A. Minibar

1. Business menu
2. Global menu

B. Sidebar 3. User menu 4. Main menu

https://invis.io/Y2YOOJIDTUB#/430958177_Sidebar_-_Anatomy

User menu

Gives users the option to sign out and manage other users in their group, but could also provide deep links to some settings such as SMS quota, user management or even account settings.

1. Avatar
2. Full name (truncated)
3. Hotel name (for single property users) / "Enterprise" label (for enterprise users)
4. Dropdown menu

https://invis.io/3MYOQ72T4R6#/430970213_Sidebar_-_User_Menu_Anatomy

Main menu

This is the primary platform navigation and is divided up into section of one or more menu items. Based on the account type, menu items might be enabled or locked.

1. Section title
2. Menu item (default)
3. Menu item (active)
4. Menu item (hover)
5. Unread counter
6. Menu item (locked default, locked hover)

https://invis.io/NQYOQ04VGXD#/430968712_Sidebar_-_Menu_Anatomy

Minibar Anatomy

1. Favicon
2. Hotels (active state)
3. Restaurants (default state)