open-index/open-npm huggingface dataset:
npm package: @inexsoft/inexnavbar
Description: A simple easy to use responsive nav bar/ Menu bar JQuery Plugin
Author: Venura Sasanka Abeysinghe Abeysinghe Achchige Don
Latest version: 1.2.0

# inexnavbar
A simple easy to use responsive nav bar created by Inexsoft shared with the community

## How to use the plugin

First, you need to add Fontawesome, Google Material icon fonts and jquery to your page as below
```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 <link  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
Remember to compile the sass css file and include it in the page

```
<script>
    $(document).ready(function(){
        $('.inexnavbar').displayInexNavBar();            
     });
</script>
```

Finally you can create the nav bar structure as below.

```
 <div class="inexnavbar">
        <nav>
            <ul class="main-menu">
                <li ><a href='#'>Main Item1</a></li>
                <li ><a href='#'>Main Item2</a></li>
                <li ><a href='#'>Main Item3</a>
                <ul class="sub-menu">
                    <li><a href='#'>Sub Menu1 Item1 </a></li>
                    <li><a href='#'>Sub Menu1 Item2 </a></li>
                    <li ><a href='#'>Sub Menu1 Item3 </a>
                    <ul class="sub-menu">
                            <li><a href='#'>Sub Menu1 Sub Menu1 Item1 </a></li>
                            <li><a href='#'>Sub Menu1 Sub Menu1 Item2 </a></li>
                            <li><a href='#'>Sub Menu1 Sub Menu1 Item3 </a></li>
                        </ul>
                    </li>
                </ul>
            </li>
                <li ><a href='#'>Main Item4</a>
                <ul class="sub-menu">
                        <li><a href='#'>Sub Menu2 Item1 </a></li>
                        <li><a href='#'>Sub Menu2 Item2 </a></li>
                        <li><a href='#'>Sub Menu2 Item3 </a></li>
                    </ul>
                </li>
            </ul>
            <a class="nav-icon"><i class="material-icons">view_headline</i></a>
        </nav>
    </div>
    
  ```  
    
## Options Available
    
    'navWidth': Sets the width of the nav bar
    'upIconClass': changes the Up arrow on menu
    'downIconClass': changes the down arrow on menu
    
    
    Below are default values
    
    'navWidth': 100,
    'upIconClass': 'fa fa-angle-double-up',
    'downIconClass': 'fa fa-angle-double-down'
    
    Can be used as below

```
<script>
        $(document).ready(function(){
            $('.inexnavbar').displayInexNavBar(
                {
    'navWidth': 50,
    'upIconClass': 'fa fa-arrow-circle-up',
    'downIconClass': 'fa fa-arrow-circle-down'
 });         
        });
</script>
```