BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Navigation

Different navigational elements aid user to access portal pages.

Primary Navigation

Primary Navigation is the main navigation of any website, it is also sometime referred to as "Main" or "Global" navigation. It is designed to provide access to all major site pages and to make those pages easily accessible throughout the entire website. This navigation is persistent across the experience.

View Example: HTML

Sample desktop view only. Not to scale.

table type 2

table type 2

Primary Navigation with sub navigation

The primary navigation can also have sub or secondary navigation in a mega menu style, intended to provide navigation beyond primary pages or top level categories.

View Example: HTML

Sample desktop view only. Not to scale.

Megamenu
  • Download All Associated Files:Zip

Utility Menu

Utility navigation features are secondary in nature, they are important for users but may not be the primary reason to navigate the site. Being secondary, they can be relegated to a secondary (less prominent) visual placement on the site as long as users can quickly find the utility.

UX Best Practice: Links to destinations such as contact information, user profile information, alerts, search, messages, sign in / sign out should be included in the Utility Menu.

Sample desktop view only. Not to scale.

table type 2


table type 2

  • Example


Edit Edit Edit Edit


HideShow CSS
                         
.utility-container {
	margin: 0;
	padding: 15px 15px;
	display: inline-flex;
	height: 70px;
	background-color: #fff;
}
.utility-container:hover {
	background-color: #F2F2F2;
}
.util-item {
	text-align: center;
	display: block;
	padding: 0px 0px;
	
}
.util-item::before {
	content: attr(data-content);
	display: block;
	visibility: hidden;
	text-transform: uppercase;
	text-decoration: none;
	height: 11px;
	color: #333333;
	font-size: 11px;
	text-wrap: suppress;
}
.util-item:hover::before {
	content: attr(data-content);
	visibility: visible;
}
.util-item a {
	padding: 0px 25px;
	
}
.util-item img {
	width: 20px;
	margin-top: 4px;
	vertical-align: middle;
}
.util-item span {
	display: block;
	visibility: hidden;
	text-transform: uppercase;
	text-decoration: none;
	height: 11px;
	color: #333333;
	font-size: 11px;
}
.ml-icon-link:hover, .ml-icon-link:focus, .hover.ml-icon-link {
}
.util-item:hover span, .util-item:focus span {
	visibility: visible;
}


                            
HideShow HTML
                        
 

<!--===== Utility Menu: Start ===== -->
<div class="utility-container">

<span class="util-item" data-content="profile"><a href="" ><img src="/assets/patterns/html/navigation/img/utility/util-profile.svg" alt="Edit" onMouseOver="this.src='/assets/patterns/html/navigation/img/utility/util-profile-hover.svg';" onMouseOut="this.src='/assets/patterns/html/navigation/img/utility/util-profile.svg';"/></a></span>

<span class="util-item" data-content="Messages"><a href="" ><img src="/assets/patterns/html/navigation/img/utility/util-email.svg" alt="Edit" onMouseOver="this.src='/assets/patterns/html/navigation/img/utility/util-email-hover.svg';" onMouseOut="this.src='/assets/patterns/html/navigation/img/utility/util-email.svg';"/></a></span>

<span class="util-item" data-content="Contact Us"><a href="" ><img src="/assets/patterns/html/navigation/img/utility/util_support.svg" alt="Edit" onMouseOver="this.src='/assets/patterns/html/navigation/img/utility/util_support-hover.svg';" onMouseOut="this.src='/assets/patterns/html/navigation/img/utility/util_support.svg';"/></a></span>

<span class="util-item" data-content="Log Out"><a href="" ><img src="/assets/patterns/html/navigation/img/utility/util-logout.svg" alt="Edit" onMouseOver="this.src='/assets/patterns/html/navigation/img/utility/util-logout-hover.svg';" onMouseOut="this.src='/assets/patterns/html/navigation/img/utility/util-logout.svg';"/></a></span>

</div>
<!--===== Utility Menu: End ===== -->

Responsive

Tablet View:


  • • Megamenu will wrap columns based on viewport width.
  • • Utility Menu will become static at the bottom of the screen.
  • • Breadcrumb will remain as it is will expand to view port width.
table type 2

Responsive

Mobile View:


  • • Megamenu will expand to full width of viewport in sigal column. Each item will become expand collapse accordion style. Hamburger icon will open megamenu accordion and "X" will close it.
  • • Utility Menu will become static at the bottom of the screen.
  • • Breadcrumb will supress at mobile view.
table type 2  table type 2