Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Sidenav 

<a href="#" data-activates="slide-out" class="button-collapse">Open sidebar</a>

<div id="slide-out" class="side-nav fixed">
    <ul class="custom-scrollbar">
        <!-- Search Form -->
        <li class="search-form">
            <form class="form-inline">
                <label for="frm-navbar-search" class="sr-only">Zoeken</label>
                <input class="form-control" id="frm-navbar-search" type="text" placeholder="Zoeken">
                <i class="mdi mdi-magnify" aria-hidden="true"></i>
            </form>
        </li>
        <!--/. Search Form -->
        <!-- Side navigation links -->
        <li>
            <ul class="collapsible collapsible-accordion">
                <li>
                    <a class="collapsible-header waves-effect arrow-r">
                        <i class="mdi mdi-school" aria-hidden="true"></i>
                        Lorem
                        <i class="mdi mdi-chevron-down rotate-icon" aria-hidden="true"></i>
                    </a>
                    <div class="collapsible-body">
                        <ul class="collapsible-list">
                            <li><a href="#" class="waves-effect">Submit listing</a>
                            </li>
                            <li><a href="#" class="waves-effect">Registration form</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a class="waves-effect">
                        <i class="mdi mdi-car" aria-hidden="true"></i>
                        Lorem
                    </a>
                </li>
                <li>
                    <a class="waves-effect">
                        <i class="mdi mdi-human-female" aria-hidden="true"></i>
                        Lorem
                    </a>
                </li>
                <li>
                    <a class="waves-effect">
                        <i class="mdi mdi-bike" aria-hidden="true"></i>
                        Lorem
                    </a>
                </li>
                <li>
                    <a class="waves-effect">
                        <i class="mdi mdi-human-male" aria-hidden="true"></i>
                        Lorem
                    </a>
                </li>
            </ul>
        </li>
        <!--/. Side navigation links -->
        <div class="sidenav-bg mask-strong"></div>
    </ul>
</div>

Sidenav - Do not implement!

Based on the version from MDB:
https://mdbootstrap.com/javascript/sidenav/

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to achieve this and should be placed in the Additional component(s) script section as documented in How to use.

<script>
    // SideNav button initialization
    $(".button-collapse").sideNav();
    // SideNav scrollbar initialization
    var sideNavScrollbar = $('.side-nav .custom-scrollbar').get(0);
    Ps.initialize(sideNavScrollbar);
</script>

Notes

  • The sidenav and the trigger are connected by specifying a data-activates attribute on the trigger and a corresponding id on the sidenav element