CSS and jQuery Tree View Navigation Menu – treeNav

A lightweight and easy to use css & jQuery plugin to generate tree view navigation menu from HTML nested unordered list.

Plugin Overview

Plugin: treeNav
Author: Asif Mughal
Licence: MIT Licence
Published: March 3, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 24.33 KB

How to Use Tree View Navigation:

1. Load the jQuery and Font Awesome into HTML document.


<!--Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

2. Also include Tree Nav javascript and CSS files.

<!--Tree Nav CSS-->
<link rel="stylesheet" href="css/tree-nav.css" />
<!--Tree Nav Js-->
<script src="js/jquery.treenav.js"></script>

3. Create HTML nested unordered list for tree nav. Add the attribute data-type=”folder” to the parent li that has child ul.

 <nav class="tree-nav default">
     <ul class="main-items">
       <li data-type="folder">
               <a href="#1"> Main Item </a>
                  <li><a href="#1"> Sub Item </a> </li>
                  <li><a href="#1"> Sub Item </a> </li>

4. Call the plugin into jQuery document ready function to active the tree navigation.


Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.