Navigation

This section explains how users can navigate between pages and sections within the tool, as well as the configuration options to make navigation as accessible and intuitive as possible.

Syntphony offers two types of menus:

• Global menu
• Profile menu

What is the global menu?

The global menu is a strip that can be displayed vertically or horizontally at the top or side of the page. This menu remains always visible and offers a quick and intuitive way of navigation.

It includes frequently used elements such as “Home”, “Blog”, or “Contact”, but you can configure it to display any other tool that is needed.

The menu is fully accessible due to:

• The use of a clear and legible font
• Different color schemes that allow clear visualization
• Hover effects when the user interacts with the menu
• Drop-downs to display different menu levels
• Responsive design that adjusts to all screen sizes, collapsing into a “hamburger” design on smaller resolutions

What is the profile menu?

This menu, located at the top right of the screen, shows users customized controls and options tailored to their accounts and preferences. It is only visible to users who have a profile on the tool.

The profile menu usually includes items such as the Activity Center, My Activity, My Applications, My Bookmarks, My Professional Profile, and more.

How to configure the menu?

The tool allows you to configure two aspects of the menu:

• The display style of the menu
• The items displayed in the menu

How to configure the global menu display?

To configure the main menu style, go to: Syntphony settings > This tenant > Main Menu

The parameters you need to know to edit the menu are:

• layout: Configure the position of the global menu:
  • SIDEBAR: Display the menu vertically
  • TOPMENU: Display the menu horizontally
• isDisplaySearch: If set to true, a search field will appear in the menu
• sidebar: Customize the style of the menu when displayed as a sidebar
• topMenu: Customize the style of the menu when displayed as a horizontal bar
• hamburguerMenu: Customize the style of the global menu when it collapses into a “hamburger” icon

Within the last three parameters, there are more options to customize parts of the menu, such as its color, icon color, selected menu item color, etc. These customizations can be applied depending on whether the menu is collapsed or expanded.

After configuring the style, press the Save button and refresh the page to see the changes.

For inspiration, you can find some configuration examples at the following link.

Alternatively, you can view detailed configuration options at the following link.

How to configure the menu items?

• Title: The name of the component visible to the user when navigating the tool
• Icon: The name of the icon used in the menu. The value can be:
  • The name of an Office UI Fabric icon
• URL: The URL to which the menu entry redirects
• Internal Name: This column can be filled in to use the components offered by the tool. The options are:
  • FAVORITES
  • BOOKMARKS
  • APPLICATIONS
  • DRAFTS
  • FEEDBACK
  • ACTIVITY
• Main Menu: Indicates whether the item appears in the global menu or the profile menu. If checked, the item will only appear in the global menu.
• Open in New Tab: Indicates whether the menu item opens in a new tab or the same tab.
• Position: A numeric value that indicates the order in which the item will be displayed in the menu. Lower numbers appear first.
• Expanded Image: Allows you to specify a different image to be displayed when the menu is expanded. This can enhance the visual experience by providing more detailed branding or visual cues when the menu is in its expanded state.
• Styles: Allows you to specify a different style for the menu item. This can include options like color, font size, and other CSS properties to customize the appearance of the menu item.
• Top: Indicates the position of the menu item. If this option is active (checked), the item will appear at the top of the main menu. If it’s inactive (unchecked), the item will appear at the bottom of the menu.

To create a new menu entry, click on the New button at the top of the screen.

Once you have clicked the button, a pop-up window will appear where you must fill in all the fields with the information related to the new menu.

Existing menu entries can be edited or deleted by selecting them and clicking on the desired action button.

If you are using the multi-language feature and want to use a different title for each language, a column with the configured languages in the tenant will be created. In this column, you can specify the title to be used for each language.

You can also create a “Togo Sidebar Folder”

Within this folder, you can add multiple menu items and group them. These items will be displayed in the Main Menu as a second-level grouped section.

Changes applied to the global menu may not appear immediately, so it is necessary to clear the cache by following these steps:

Click on Syntphony settings > This tenant > Main Menu > Click on the save button