Nenav is a plugin written with jQuery and Prettify to navigate inside a folder within different type of sources and different programming languages, or better, within any text file, with syntax highlight for languages knows by Prettify.

The plugin is safe, i.e. prevent the navigation in unauthorized path. Is appropriate, however, put the folders, where Nenav is active, in another folder specified in the plugin's PHP file.

Nenav is released under GNU GPL 3 license. You can change the appearance using CSS themes.

How to use & Download

Using Nenav is easy. Firstly, you have to include jQuery and Prettify libraries, after them you can add the Nenav JavaScript file. All this inside the tag:

<script type="text/javascript" src="js/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/nenav.js"></script> <!-- Nenav JS -->

Optionally, but raccommended, you can add the Prettify and Nenav theme. In the example below was added the default theme bootstrap-light.

<link rel='stylesheet' type='text/css' href='css/nenav-bootstrap-light.css'>
<link rel='stylesheet' type='text/css' href='css/prettify.css'> 

Initialization of a new view of Nenav happen with a container element and calling the nenav_init () function. Example:

<div id='nenavView'></div>
  nenav_init ('#nenavView', { init_path: 'nenav' });

function nenav_init () is defined by:

nenav_init (element, properties)

  /*  Required. Identify the path where navigation start. */
  init_path: 'root', 
  /* Optional. If at the begin you want to start navigation from another folder
  different from init_path. Default: null */
  curr_pos: 'subpath/of/root',
  /* Optional. Identify the sort type  when nenav is initialized. Default: name. 
  Values: name, size, time, name-reverse, size-reverse, time-reverse. */
  sort: 'size-reverse',
  /* Optional. It's the folder where the nenav.php file was located. Default: php */
  php_path: 'php', 
  /* Optional. It's the folder where the file nenav-ui.html was located. Default: html */
  ui_path: 'html' 

You can see the example file to use Nenav inside the uncompressed package.

Finally, maybe you should configure the PHP file at variable:

$nenav_prefix = '../nav_path';

For security reason, Nenav not allow to use a path with relative links such as . or .. in javascript code, because of this is needed set a path with this values inside a variable in the PHP file. This path, in the PHP file, must not have the / at the end, and in the same way, in the javascript file, it must be omitted.


Inside the Nenav package there are four themes, two basic ( light and dark ) and two Bootstrap-like. This is important to clarify because these two themes ( bootstrap-dark and bootstrap-light ) not using really bootstrap but they use a style like that.

Bootstrap Light Theme
Bootstrap Dark Theme
Light Theme
Dark Theme

Sources Navigation