Skip to content

The Menu

The templates come with a built-in menu system.

When building menus for your site, simply follow the precedent set in the downloaded template samples. However, if you want to understand it, the best way to proceed is to have a close look at it and reverse-engineer it.

In the section that follows, we’ve chosen to focus on a few high points of the menu structure.

Conceptually, each top-level navigational item should be thought of as a section of your site. The top-level buttons do not take you to a page; rather, they open the menu and allow you to navigate to any page within that section.

The menu HTML follows a straightforward structure of nested lists:

<div id="megamenu">

<ul class="mainnav" role="menu">

<!--     Here is the home button  -->

<li><a class="home_button" href="/" tabindex="2” role="button">Home <i class=”icon-fa-home pull-right”></i></a></li>

<!--     Here is a menu  -->

<li class=”top-menu-item”>

<button id=”drop2” class=”list-item-button” aria-haspopup=”true” role=”button” tabindex=”3”>Section Name <i class=”icon-fa-chevron-right pull-right”></i></button>

<div class=”megamenu-sub” id=”menu-one”  aria-labelledby=”drop2” aria-expanded=”false”>

<button class=”menu-back btn”  data-toggle=”dropdown”  role=”button”><i class=”icon-fa-chevron-left”></i> <span class=”back”>Back</span></button>

<h3>Section Name </h3>

<div class=”inner”>

<div class=”menu-header”>

<ul class=”menu”>

<li class=”menu-item”><a href=”#”>Home</a></li>

<li class=”menu-item current-menu-item”><a href=”#”>Blog</a></li>

<li class=”menu-item”><a href=”#”>Page Name</a></li>

<li class=”menu-item menu-item-has-children”><a href=”#”>Another Page</a>

<ul class=”sub-menu”>

<li class=”menu-item”><a href=”#”>Page</a></li>

<li class=”menu-item”><a href=”#”>Page</a></li>

</ul>

</li>

<li  class=”menu-item”><a href=”#”>Level 1</a>

<ul class=”sub-menu”>

<li class=”menu-item menu-item-has-children”><a href=”#”>Level 2</a>

<ul class=”sub-menu”>

<li class=”menu-item”><a href=”#”>Level 3</a></li>

<li class=”menu-item”><a href=”#”>Level 3a</a></li>

<li class=”menu-item”><a href=”#”>Level 3b</a></li>

</ul>

</li>

<li class=”menu-item”><a href=”#”>Level 2a</a></li>

<li class=”menu-item”><a href=”#”>Level 2b</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</li>

<!--     Repeat these menus as necessary -->

<!--     Here is the giving button  -->

<li id=”giving”><a href=”http://giveto.utk.edu”>Give to UT <i class=”icon-fa-gift fa-lg pull-right”></i></a></li>

</ul>

</div>

Each item in the top-level navigation should be placed within <li> elements with a class of top-menu-item. Each top-level item, or section, that you add is a <button>. Each button expands to reveal a menu for that navigational item, if one is present.

Within each menu, each additional “level” of navigation is a nested list within its parent list item. Each <li> should have a class of menu-item. The current menu item should have a class of current-menu-item.

Menu items that will contain submenus are indicated by the class menu-item-has-children. Submenus are classed sub-menu.

Also note that there are back buttons and <div>s nested within the menu. These aid navigation on mobile devices and should not be altered.

Accessibility

The examples included in the HTML templates make use of ARIA attributes in each of the main menu sections. These are vital for visitors using screen readers and other assistive devices. Note the schemes used in the example and replicate them in the menus of your site. For more information on accessibility, visit Accessible Information, Materials, & Technology.


The flagship campus of the University of Tennessee System and partner in the Tennessee Transfer Pathway.

Report an accessibility barrier