Design Best Practices for the Menu Bar Widget
Widget Placement and Configuration
• Place the widget in a container on the left edge of a mashup layout. The menu bar only supports LTR (left to right) languages and menu items are not mirrored. Avoid placing the widget on the right as icons are always placed to the left side of the item text.
• Avoid making the menu bar width too small. Make sure that menu labels are easy to read and are not truncated. Use the SubMenuMinWidth and SubMenuMaxWidth properties to control the size of the submenus.
• Configure any Menu Bar widget that you add to a mashup according to the steps in the
Creating a Menu Bar Layout topic. Different configurations can affect the menu bar behavior and usability.
Menu Titles
Each menu item must describe the linked page or item that it links to.
• Use clear names that reflect the content of the linked destination accurately. Avoid using complex jargon on your navigation items.
• Use menu titles that are as short and clear as possible. Remove unnecessary words to prevent text and label truncation on the menu bar.
• Use consistent capitalization across all menu items.
Multiple Levels of Navigation
You can configure the menu bar with many navigations levels using submenus. Each submenu displays a number of nested items on the same level. This lets you build navigation items with complex hierarchy. Each item that displays a submenu shows a caret or a plus sign, indicating that the item contains another level of navigation.
• Group related items together using similar capitalization and grammar.
• Avoid creating deep levels of navigation. Menu items that are placed under multiple submenus require more time to find. This can affect the usability of your application.
• Place the most used navigation items in locations that are easy to find and remember.
Icons
• Use icons to help your users understand the menu items. Visual aids are a useful way to communicate the meaning of different menu items.
• Add icons consistently to all Menu items. Avoid mixing items with and without icons. Missing icons can decrease the clarity of your menu hierarchy.
• Always include icons for items when the menu bar compact view mode is enabled.