HTML 5 Document Navigation in ASP.NET MVC

In this post we are going to create a widget of sorts for document page navigation arrows that appear on the left and right sides of the screen. Ever go to a news site and see arrows on the side of the page that allow you to click between articles? Sometimes that is a useful feature to add to an app, so we are going to do so as a helper method defined as the following.

@GlobalHelpers.LeftArrow("Left")
@GlobalHelpers.RightArrow("Right")

It’s important to note that I haven’t wired up the arrows to navigational actions, but it wouldn’t be difficult to do so. I’ve defined some global helpers in the (App_Code) folder that output some HTML:

@helper LeftArrow(string title, string icon = "glyphicons-chevron-left")
{
   <div class="doc-left-arrow-container">
      <div id="DocLeftNavButton" class="doc-left-arrow-block" title="@title">
         <span class="glyphicons @icon"></span>
      </div>
   </div>
}

@helper RightArrow(string title, string icon = "glyphicons-chevron-right")
{
   <div class="doc-right-arrow-container">
      <div id="DocRightNavButton" class="doc-right-arrow-block" title="@title">
         <span class="glyphicons @icon"></span>
      </div>
   </div>
}

These helpers output a template that gets transformed to left and right fixed arrows via the following CSS.

.doc-left-arrow-container {
   width: 50px;
   top: 200px;
   left: 0px;
   height: 50px;
   position: fixed;
   font-size: 36px;
}

.doc-left-arrow-block {
   border: 1px solid black;
   border-left: 0 !important;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
}

.doc-left-arrow-block .glyphicons {
   margin-top: 10px;
}

.doc-right-arrow-container {
   width: 50px;
   top: 200px;
   right: 0px;
   height: 50px;
   position: fixed;
   font-size: 36px;
}

.doc-right-arrow-block {
   border: 1px solid black;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
}

   .doc-right-arrow-block .glyphicons {
      margin-top: 10px;
   }

The idea here being that we are using absolute positioning to affix these documents to the left and right side. Albeit not perfect, it can be easily tweaked to utilize media groups to shrink in size, turn itself off with mobile dimensions, and provide other features. It would also be easy to specify a URL parameter in the helper method as well, as a means to define a URL for link redirection.