Navigation Styles
Last updated
MangoApps Administrators Guide
Last updated
Configure the navigational style layout as vertically positioned on the left side of the page, horizontal at the top of the page, or horizontal at the top of the page with modules condensed into one mega menu. Different user segments can be assigned any of the navigation style layouts based on their preferences or specific requirements. If the vertical or mega menu navigation style is chosen, there will be an additional choice to open the navigation menu either on hover or on click, providing flexibility in user interaction. This configuration allows for tailored navigation experiences suited to different user segments and their preferences.
Vertical navigation menus offer several advantages. Firstly, they excel in space efficiency, particularly on narrow screen layouts like mobile devices or sidebar navigation panels, effectively utilizing limited screen space. Additionally, they present a clear hierarchy of menu items and submenus, aiding users in understanding the platform's structure and navigating different content levels easily. Moreover, vertical menus provide consistency across platform pages, ensuring a familiar and predictable navigation experience for users. However, they suffer from limited visibility due to constrained horizontal space, which may lead to shorter menu item labels or truncated text, making it challenging for users to swiftly scan and locate their desired options.
Vertical menus are recommended for a site with many items in the navigation menu. This way, the menu can be collapsed along the side of the screen, out of the way of the page's content.
Horizontal navigation menus offer several advantages. Firstly, they provide a sense of familiarity as they mirror the layout commonly found in web browsers and software applications, thus making them intuitive for most users. Additionally, they make efficient use of screen space by displaying multiple menu items side by side, thereby reducing the need for scrolling. This layout also allows for direct access to all menu options at a glance, facilitating quick navigation to different sections of the platform. However, as more features are added to the platform, horizontal navigation menus can become crowded and cluttered, presenting a challenge for users to quickly locate desired options amidst the abundance of choices.
Horizontal menus are recommended for a more web-like experience and are best executed with a minimal amount of menu icons.
Mega menus offer several benefits, including enhanced organization through a hierarchical structure that efficiently categorizes and organizes numerous menu items and submenus, simplifying users' search for specific content. Additionally, they enhance visibility by displaying icons alongside menu items, aiding users in making informed decisions. Moreover, mega menus streamline navigation by reducing the necessity for multiple clicks to access deeper levels of the platform, often enabling direct access to submenus from the main menu. However, the complexity introduced by mega menus with many modules and hierarchies may overwhelm users unfamiliar with the platform, making it challenging for them to navigate.
The megamenu is recommended for sites that would like to display a large amount of icons in a structured and accessible format. This combines the best of both worlds seen in the vertical and horizontal styles.
The Advanced Mega Menu features several key sections, including the Top Right Section, which houses elements such as Chats, Messages, AI Assistants, and a Stock Ticker (visible only on the web).
Configuring the Advanced Mega Menu involves editing both the Top Right, Mega Menu, and Outside Mega Menu sections, with full control over the layout and content. Admins can also switch between different navigation styles, ensuring no data is lost during the transition. The Advanced Mega Menu is fully compatible with existing settings, including parent-child relationships for menu items.
Separate from the other navigation menu styles, the Advanced Mega menu also includes a Stock Ticker option.
The Stock Ticker is configurable and allows admins to display real-time stock data, with the ability to set specific properties like company symbol, text color, and gain/loss indicators. This section is collapsible for a more streamlined navigation interface.
The Mega Menu Section allows admins to choose between different styles for the main action (Icon Only or Text Only) and menu items (Icon & Text or Text Only). Additionally, child items can be indented under parent items for better organization. A Featured Section highlights a priority item with customizable background colors and text, ensuring it stands out in the menu.
Admins can easily manage and add links through drag-and-drop functionality, and they have the option to mark newly added items with a "New" tag for better visibility.
The Outside Mega Menu Section allows the inclusion of additional modules and custom links, which can be displayed either horizontally or vertically depending on the configuration. Horizontal items appear in a row, while vertical items are stacked in a sidebar. This section is also fully editable by admins, with options to turn individual items on or off.
On mobile devices, the Advanced Mega Menu is displayed as a bottom navigation bar, providing full support for all sections, though the Stock Ticker is hidden for mobile users.
