Responsive navigation plugin that weighs just 452 bytes

TinyNav.js is a tiny jQuery plugin (452 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected="selected" for that item.

This isn’t the first plugin to do this and it doesn't provide a lot of options, but it might be the smallest (file size). Scale this page to see the plugin in action.

Check out also the new version called Responsive Nav.


1. Link files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="tinynav.min.js"></script>

2. Add Markup

<ul id="nav">
  <li class="selected"><a href="/">Home</a></li>
  <li><a href="/about/">About</a></li>
  <li><a href="/contact/">Contact</a></li>

3. Add Styles

/* styles for desktop */
.tinynav { display: none }

/* styles for mobile */
@media screen and (max-width: 600px) {
    .tinynav { display: block }
    #nav { display: none }

4. Hook up the plugin

  $(function () {

5. Options you can customize

  active: 'selected', // String: Set the "active" class
  header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
  indent: '- ', // String: Specify text for indenting sub-items
  label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)

That is all! Note: If you worry how this will work when JS is disabled, then I suggest you to add 'js' class for <html> with JavaScript and use that in CSS when hiding the normal navigation, so that the navigation is still accessible if someone is browsing the site JavaScript disabled. Example:




@media screen and (max-width: 600px) {
    .js .tinynav { display: block }
    .js #nav { display: none }

TinyNav.js is tested with the following browser


Please post your bug reports to GitHub issues. If you need support, try Stack Overflow.

Download the latest version from GitHub
Fork me on GitHub