Skip to Content Skip to Navigation

User Experience Toolkit

Local Navigation

Local (side) navigation is optional but useful for exposing Persistent local navigation to a flow or section of an application.

Default Implementation

HTML:
<nav id="ux-side-nav">
	<ul>			
		<li><a href="page.url" >Level 1</a></li>
		<li><a href="page.url" >Level 1</a></li>
		<li><a class="ux-expandable" href="#" aria-expanded="true">Level 1 Expandable</a>
			<ul aria-hidden="false">
				<li><a href="page.url">Level 2</a></li>
				<li><a href="page.url">Level 2</a></li>
				<li><a href="page.url">Level 2</a></li>
				<li><a class="ux-expandable" href="#" aria-expanded="true">Level 2 Expandable</a>
					<ul aria-hidden="false">
						<li><a href="page.url">Level 3</a></li>
						<li><a class="selected" 
									href="page.url">Level 3 Selected</a></li>
						<li><a href="page.url">Level 3</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="page.url" >Level 1</a></li>
	</ul>
</nav>

Local navigation is built using the new HTML5 element nav. The contents of the side navigation are simply unordered lists (ul) and anchor tags (a). When implementing local navigation, it should logically appear as the first item in the content section of the page's markup and should be inside of its own grid system container. The suggested UXT Framework grid system container is a grid_4 of a 16 column grid.

Local Navigation Parameter Classes
Class Description
ux-expandable This class indicates the unordered list (ul) below should be hidden by the adjacent anchor (a) .
expanded Used on anchor tags that also have the class of ux-expandable and changes the default state of the child list from hidden to displayed.
selected Add to the anchor tag on the currently active page to visually indicate to the user that they are currently on that item.

Accessibility Requirements

To meet accessibility requirements Local navigation requires two additional aria attributes of; aria-expanded and aria-hidden. Anchor (a) tags require the aria-expanded attribute and should be set to a default value of false if the section is closed by default or true if the section is already open on page load. The container element, in this case an unordered list (ul), should have the attribute of aria-hidden. Here the attribute should have a value of true if the section is collapsed by default and a value of false if the section is expanded on page load.

Developers do not have to worry about updating the aria attributes. By default UXT will update all attributes using UXT expandables on its own.

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