diff --git a/demo.html b/demo.html
index be5259a..31e3eb3 100644
--- a/demo.html
+++ b/demo.html
@@ -9,16 +9,16 @@
   <style>
     /* styles for desktop */
     .tinynav { display: none }
-    #nav .selected a, #nav2 .selected a { color: red }
+    #nav .selected a, #nav2 .selected a, #nav3 .selected a { color: red }
     /* styles for mobile */
     @media screen and (max-width: 600px) {
       .tinynav { display: block }
-      #nav, #nav2 { display: none }
+      #nav, #nav2, #nav3 { display: none }
     }
   </style>
 
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
-  <script src="tinynav.min.js"></script>
+  <script src="tinynav.js"></script>
   <script>
     $(function () {
 
@@ -33,6 +33,14 @@
         header: 'Navigation' // Writing any title with this option triggers the header
       });
 
+      // TinyNav.js 3
+      $('#nav3').tinyNav({
+        active: 'selected',
+        header: 'Header text',
+        label: 'Label text',
+        element: '#select-container'
+      });
+
     });
   </script>
 
@@ -55,7 +63,6 @@ <h1>TinyNav.js</h1>
       <li><a href="http://yahoo.com">Yahoo</a></li>
     </ul>
     
-    
     <ul id="nav2">
       <li><a href="http://google.com">Google</a></li>
       <li><a href="demo.html">Demo page</a></li>
@@ -63,6 +70,34 @@ <h1>TinyNav.js</h1>
       <li><a href="http://yahoo.com">Yahoo</a></li>
     </ul>
 
+    <ul id="nav3">
+      <li><a href="http://google.com">Google</a></li>
+      <li><a href="demo.html">Demo page</a></li>
+      <li><a href="http://bing.com">Bing</a>
+        <ul>
+          <li><a href="http://google.com">Google</a></li>
+          <li><a href="demo.html">Demo page</a>
+            <ul>
+              <li><a href="http://google.com">Google</a></li>
+              <li><a href="demo.html">Demo page</a></li>
+              <li><a href="http://bing.com">Bing</a></li>
+              <li><a href="http://yahoo.com">Yahoo</a></li>
+            </ul>
+          </li>
+          <li><a href="http://bing.com">Bing</a></li>
+          <li><a href="http://yahoo.com">Yahoo</a></li>
+        </ul>
+      </li>
+      <li class="selected"><a href="http://yahoo.com">Yahoo</a></li>
+      <li><a href="#">This navigation will land in the container</a></li>
+    </ul>
+
+    <hr />
+
+    <div id="select-container"></div>
+
+    <hr />
+
     <p><a href="http://tinynav.viljamis.com/">See the documentation</a></p>
 
 </body>
diff --git a/tinynav.js b/tinynav.js
index f52e2df..40ef25b 100644
--- a/tinynav.js
+++ b/tinynav.js
@@ -6,7 +6,8 @@
     var settings = $.extend({
       'active' : 'selected', // String: Set the "active" class
       'header' : '', // String: Specify text for "header" and show header instead of the active item
-      'label'  : '' // String: sets the <label> text for the <select> (if not set, no label will be added)
+      'label'  : '', // String: Sets the <label> text for the <select> (if not set, no label will be added)
+      'element' : '' // String: Inject the select to a specific element
     }, options);
 
     return this.each(function () {
@@ -60,8 +61,14 @@
           window.location.href = $(this).val();
         });
 
-        // Inject select
-        $(l_namespace_i).after($select);
+        // Check if a target element is set
+        if (settings.element) {
+          // Inject select to the target element
+          $(settings.element).append($select);
+        } else {
+          // Inject select after the navigation
+          $(l_namespace_i).after($select);
+        }
 
         // Inject label
         if (settings.label) {