Application Layout

On this page...Header Navigation bar Examples

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 (note that 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.
• Environment and user information:
  • If your application needs to display the current environment and user, do this as the rightmost element in your header.
  • Format this information as the environment info, a hyphen, then the user info.
  • If your application allows the user to change the environment or user, then display this information in a dropdown button that contains these options (e.g. “Alias Maintenance”, “Change Institution”, etc.)
  • Otherwise display this information as text.

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 domain functions
• Dropdown buttons that display a dropdown menu of domain functions. 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.
• 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 size (screen width is less than 768 pixels), then the hamburger button hides or shows the navigation bar, with it initially hidden. The content area shifts off the screen to the right just enough to display the navigation bar. 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 tablet or desktop size (screen width is greater than or equal to 768 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 the nav bar is collapsed, it will temporarily expand when the user hovers the mouse over it. This expand-on-hover behavior allows the user to quickly see the full nav bar when navigating. The nav bar resumes its collapsed state after the user moves the mouse off of the nav bar.

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 explicitly 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.
• If the navigation bar is collapsed but temporarily expanded on hover, then the long text is truncated with ellipses. It does this because it’s important to not modify the height of each item between the collapsed and expanded states, otherwise users might aim for one item and end up clicking a completely different item because wrapping pushed the items down when expanded. If you see truncation of long items during expand-on-hover, you can override the width of the expand-on-hover navigation bar as described in the “Defining the Navigation Elements” section below.

Examples