Navigation bar

The navbar provides top-level page navigation for primary menu links. It is hidden on mobile where the mobile menu takes over its functionality.

Examples and Code

Select exampleDefault

Open Full Example

<div id="navigation" class="navbar">
  <nav id="main-menu" role="navigation">
    <ul class="links clearfix">
      <li class="menu-1238 first"><a href="/news/academics-and-research" title="">Academics &amp; Research</a></li>
      <li class="menu-1240"><a href="/news/campus-news" title="">Campus News</a></li>
      <li class="menu-1242"><a href="/news/student-life" title="">Student Life</a></li>
      <li class="menu-1241"><a href="/news/workplace" title="">Workplace</a></li>
      <li class="menu-1247 last"><a href="http://uonews.uoregon.edu/journalists" title="">For Journalists</a></li>
    </ul>
  </nav>  
</div>

Guidance

Usage Guidance

• Top level navigation: The navbar is the key element for provising top level navigation for your site or application.
• Subnavbar for second level nav: The subnavbar element is designed to provide the secondary navigation underneath the navbar.
• Avoid overly long/wordy menu items: Wordy menu items can take up a lot of space and result in the navbar spanning multiple rows, which degrades the design and UX of your site.