Navigation Demo

View Documentation

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 Max

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({
  maxWidth: "10000px"
});

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",
  maxWidth: "10000px"
});

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",
  maxWidth: "10000px"
});

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",
  maxWidth: "10000px"
});

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",
  maxWidth: "10000px"
});

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",
  maxWidth: "10000px"
});

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",
  maxWidth: "10000px"
});
© 2021 Formstone