#### Basic

By default, Navigation will only activate itself on screens smaller than 980px. Resize your screen if the menu is not active.

##### Menu

    <h5 class="nav_handle">Menu</h5>
    <nav class="navigation" data-navigation-handle=".nav_handle">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation();

#### No Theme

##### Menu

    <h5 class="nav_handle">Menu</h5>
    <nav class="navigation" data-navigation-handle=".nav_handle">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	theme: ""
    });

#### Off Canvas - Overlay Left

    <div class="nav_content">
    	<button type="button" class="nav_handle">Menu</button>
    </div>
    <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	type: "overlay",
    	gravity: "left"
    });

#### Off Canvas - Overlay Right

    <div class="nav_content">
    	<button type="button" class="nav_handle">Menu</button>
    </div>
    <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	type: "overlay",
    	gravity: "right"
    });

#### Off Canvas - Reveal Left

    <div class="nav_content">
    	<button type="button" class="nav_handle">Menu</button>
    </div>
    <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	type: "reveal",
    	gravity: "left"
    });

#### Off Canvas - Reveal Right

    <div class="nav_content">
    	<button type="button" class="nav_handle">Menu</button>
    </div>
    <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	type: "reveal",
    	gravity: "right"
    });

#### Off Canvas - Push Left

    <div class="nav_content">
    	<button type="button" class="nav_handle">Menu</button>
    </div>
    <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	type: "push",
    	gravity: "left"
    });

#### Off Canvas - Push Right

    <div class="nav_content">
    	<button type="button" class="nav_handle">Menu</button>
    </div>
    <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
    	<a href="#">One</a>
    	<a href="#">Two</a>
    	<a href="#">Three</a>
    </nav>

    $(".navigation").navigation({
    	type: "push",
    	gravity: "right"
    });