Application Layout

Responsive UI applications use the following layout:

• A header displays at the top.
• A navigation bar displays on the left. This section includes buttons that link to the application’s domain functions.
• The rest of the screen displays the content for the currently-selected function.

The content area changes to display the current function view as the user navigates to each new function.

The header and navigation bar always stay in the same relative location regardless of the currently displayed function.

You can hide and display elements within the header and navigation based on your app’s current context, such as whether or not the user is logged in, whether this an admin user or a regular user, the current screen width, etc.

Header

Responsive UI displays a header at the top of your application that includes the following elements:

• A “hamburger” button that controls how the navigation bar displays
• An optional back button that can be displayed in environments where you don’t have the benefit of the browser’s back button, such as native wrappers
• Your application name
• An optional search box in the center, for providing search for your application
  • The search box does not display at mobile size.
• Simple buttons for admin functions.
  • These should not be used for your application’s primary navigation; the navigation bar is used for that.
• Dropdown buttons that display a dropdown menu of admin functions.
  • These should not be used for your application’s primary navigation; the navigation bar is used for that.
  • These should be used when the number of options is relatively small, otherwise use mega menu buttons.
• Mega menu buttons that display a large flyout menu of options.
  • The mega menu is the best choice when you have a moderate to large number of options. Each item in the mega menu can act as links to views in this site or to external sites.
  • If you only need simple text for each option, use mega menu items. These display a small amount of text, without an icon. Mega menu items can be optionally grouped with a header.
  • If you need to display more than simple text for each option, use a mega menu template. Specify the fixed width and height of each template item and a few simple elements to use in the template.
  • Note that you cannot mix templates and groups/items within the same mega menu.
• Simple text for providing context. Keep this text short since there isn’t much room in the header, especially at smaller screen widths. You may even want to hide this text at mobile size.

Buttons in the header automatically hide their text at mobile size, although the icon continues to display. Your application may choose to display header items slightly differently at mobile size than at larger sizes. Your application is responsible for ensuring that the items in the header will fit at the various screen widths supported by the application.

Navigation bar

Responsive UI displays a navigation bar at the left side of your application that includes the following elements:

• Simple buttons for navigating to your app’s primary functionality
• Mega menu buttons that display a large flyout menu of options.
  • The mega menu is the best choice when you have a moderate to large number of options. Each item in the mega menu can act as links to views in this site or to external sites.
  • If you only need simple text for each option, use mega menu items. These display a small amount of text, without an icon. Mega menu items can be optionally grouped with a header.
  • If you need to display more than simple text for each option, use a mega menu template. Specify the fixed width and height of each template item and a few simple elements to use in the template.
  • Note that you cannot mix templates and groups/items within the same mega menu.
• Separators to separate related groups of navigation buttons

The hamburger button in the header affects how the navigation bar displays, depending on the current screen width.

• If the app is running at mobile or tablet size (screen width is less than 1024 pixels), then the hamburger button hides or shows the navigation bar, with it initially hidden. The navigation bar hides when you select an item in its menu or when you press the hamburger button again.
• If the app is running at desktop size (screen width is greater than or equal to 1024 pixels), then the navigation bar is always visible, with the hamburger button expanding or collapsing it.
  • You can manually specify that the nav bar initially displays expanded or collapsed. Otherwise the default behavior is for the nav bar to be initially expanded at desktop size and initially collapsed at tablet size.

If a navigation item’s text is too wide to fit in the navigation bar, it will do the following based on the navigation bar’s expanded/collapsed state:

• If the navigation bar is expanded, the button text will wrap to a new line.
• If the navigation bar is collapsed, the text doesn’t display, so its length isn’t an issue.

Examples