Skip to Content Skip to Navigation

User Experience Toolkit


Popovers are an interactive way to provide a secondary form of navigation in many different location outside the dedicated areas.

Default Implementation

<a href="#" class="ux-popover">Program Area!</a>
<div class="ux-popover-container" >
		<li><a href="#">UI</a></li>
		<li><a href="#">Dews</a></li>
		... Omitted Content ...

In order to implement popovers, place an anchor where ever the secondary navigation is expected to appear and give it a class of ux-popover. Right after the the new anchor point, create a new div with the the class of ux-popover-container. The contents of a popover should always be an unorder list (ul), with each list item (li) being a link to another page.

Additional Styles

Be default popovers use a very strong dark barkground to give contrast over normal page content. To implement a more blended popover style simply add the class of light-popover after the standard ux-popover class.

<a href="#" class="ux-popover light-popover">Program Area Light!</a>
<div class="ux-popover-container" >
	... Omitted Content ...

Thanks for the feedback! It will help us improve your experience.