JSON Menu Component v2.0.0

BUY NOW!

Bootstrap Navbar And Navs

The following examples show how to use Bootstrap classes to display navigation.

Navbar

Using menu: { class: '' } option in IncodedMenu and you will be able to get Bootstrap Navbar. Set nav navbar-nav in class option.

* Check documentation.

* Click here to check Bootstrap documentation.

HTML:

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#incoded-menu-navbar">
                <span class="sr-only">Toggle Menu</span>
                <i class="fa fa-ellipsis-v"></i>
            </button>
            <a href="/" class="navbar-brand">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="incoded-menu-navbar">
            <!-- Menu will be inserted here -->
        </div>
    </div>
</nav>

Javascript:

new IncodedMenu('#incoded-menu-navbar',
{
    menu: { class: 'nav navbar-nav pull-right' }
});

Tabs and Pills

Using menu: { class: '' } option in IncodedMenu and you will be able to get Bootstrap Navs like tabs and pills. Set nav nav-pills, nav nav-tabs and other Bootstrap classes in class option.

* Check documentation.

* Click here to check Bootstrap documentation.

Tabs


HTML:

<div id="incoded-menu-tabs">
    <!-- Menu will be inserted here -->
</div>

Javascript:

new IncodedMenu('#incoded-menu-tabs',
{
    menu: { class: 'nav nav-tabs' }
});

Pills


HTML:

<div id="incoded-menu-pills">
    <!-- Menu will be inserted here -->
</div>

Javascript:

new IncodedMenu('#incoded-menu-pills',
{
    menu: { class: 'nav nav-pills' }
});

Justified Tabs


HTML:

<div id="incoded-menu-tabs-justified">
    <!-- Menu will be inserted here -->
</div>

Javascript:

new IncodedMenu('#incoded-menu-tabs-justified',
{
    menu: { class: 'nav nav-tabs nav-justified' }
});

Justified Pills


HTML:

<div id="incoded-menu-pills-justified">
    <!-- Menu will be inserted here -->
</div>

Javascript:

new IncodedMenu('#incoded-menu-pills-justified',
{
    menu: { class: 'nav nav-pills nav-justified' }
});