MVC Application Navigation Partial View Setup

Application navigation is setup in the _UIKitNavigation.cshtml file. The navigation format is that of a basic unordered list with anchor tag links surrounded by navigation tags in HTML. Sub-menus are created by putting another unordered list in a parent list item and specifying the CSS "submenu" class in the anchor tag.

Code Example

This example only shows how to create a static menu. The active How-To submenu example is static. It will be up to the development of the Application Navigation bar to decide how the HTML unordered list with link is constructed. In most applications there will be some level of authorization that will dynamically change which links and options are presented to the end-user.

<nav class="appbar">
  <ul>
     <li>
      <a href="/">Home</a>
     </li>
     <li>
       <a href="#" class="submenu active">How-To</a>
       <ul>
         <li>
           <a href="~/HowTo">Home</a>
         </li>
         <li>
           <a href="~/HowTo/Prerequisite">Prerequisite</a>
         </li>
         <li>
           <a href="~/HowTo/NPMSetup">NPM Setup</a>
         </li>
         <li>
           <a href="~/HowTo/Style">Style</a>
         </li>
         <li>
           <a href="~/HowTo/Samples">Samples</a>
         </li>
       </ul>
     </li>
     <li>
       <a href="#" class="submenu">Samples</a>
       <ul>
         <li>
           <a href="#" class="submenu">App Setup</a>
           <ul>
             <li>
               <a href="/Samples/Layout">Layout</a>
             </li>
             <li>
               <a href="/Samples/AppNavigation">App Navigation</a>
             </li>
             <li>
               <a href="/Samples/RibbonNavigation">Ribbon Nav</a>
             </li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>
</nav>