Multi Purpose Navigation Sytem For Modern Web - jQuery Corenav

File Size: 76.5 KB
Views Total: 9269
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Multi Purpose Navigation Sytem For Modern Web - jQuery Corenav

Corenav is an easy, responsive, multi-purpose, jQuery based navigation system for modern, cross-platform web development.


  • 7 built-in layouts: default, brand-center, fullscreen, sidebar, sidebar-toggle, section, side-icon.
  • Full width or not.
  • Off-canvas side menu.
  • Hamburger menu toggle button.
  • Can be placed anywhere on the navbar: left, right, center, bottom.
  • Sticky/fixed dropdown menu.
  • Custom dropdown event: click, hover, accordion
  • Scrollspy.

Basic usage:

1. Load the JavaScript coreNavigation.js and stylesheet coreNavigation.css in the html page which has jQuery library loaded.

<link rel="stylesheet" href="/path/to/coreNavigation.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/coreNavigation.js"></script>

2. Load the Font Awesome for the toggle button.

<link rel="stylesheet" href="/path/to/fontawesome.min.css">

3. Create the html for the navigation menu.

  <div class="nav-header">
    <a href="#" class="brand">
      <img src="/path/to/brand.png">
    <button class="toggle-bar">
      <span class="fa fa-bars"></span>
  <ul class="menu">
      <li><a href="#">Home</a></li>
      <li><a href="#">Category</a></li>
      <li><a href="#">Jobs</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>

4. Call the function to initialize the navigation menu.




5. Available plugin options which can be used to customize the navigation menu.


  // default, brand-center, fullscreen, sidebar, sidebar-toggle, section, side-icon
  layout: "default",

  // menu selector
  menu: ".menu",

  // full width or not
  menuFullWidth: false,

  // header selector
  header: ".nav-header",

  // left, right, center, bottom
  menuPosition: "left",

  // true or false
  container: true,

  // selector of toggle button
  toggleMenu: ".toggle-bar",

  // Only for "side-icon" layout mode
  toggleHoverSidebar: false,

  // true or false
  responsideSlide: false,

  // click, hover, accordion
  dropdownEvent: "hover",

  // default, fixed, sticky
  mode: "default",

  // enable animations
  // requires animate.css
  animated: false,
  animatedIn: "bounceIn",
  animatedOut: "bounceOut"


6. Available callback functions.


  onInit: null,
  onResize: null,
  onOpenDropdown: null,
  onCloseDropdown: null,
  onOpenMegaMenu: null,
  onCloseMegaMenu: null,
  onStartSticky: null,
  onEndSticky: null,




  • v1.1.7: update mega menu fullwidth


  • v1.1.5: fixed mode & dropdown menu


  • v1.1.4


  • v1.1.3: Fix: event onresize


  • v1.1.2: added more options & callbacks


  • v1.1.1: added more options & callbacks


  • v1.1.0: added more options & callbacks


  • v1.0.5: Fix bug for hidden on prepare elements Dropdown on sidebar


  • v1.0.2: Support animation dropdown & megamenu

About Author:

Author: Adam Muhammad Nurdin


This awesome jQuery plugin is developed by adamnurdin01. For more Advanced Usages, please check the demo page or visit the official website.