Cross-platform Multi-level Dropdown Menu – Vegas Nav

Vegas Nav is a JavaScript-powered cross-platform navigation system that can assist you create a responsive, mobile-friendly, multi-level dropdown navbar to your net app.

Extra Options:

• Collapses the navbar into an off-canvas aspect nav on small screens.
• Helps desktop, laptop computer, pill, and cellular.
• Helps multi-column mega menu.
• Extremely mild and lifeless easy to make use of.
• Semantic and Search engine optimization-friendly. Constructed with nested HTML lists.
• With out Third-party dependencies (v3+).
• Scrollspy performance (v3+).

See It In Motion:

See Additionally:

Learn how to use it:

1. Load the core stylesheet vgnav.css and theme CSS vgnav-theme.css within the doc.

<hyperlink href="/path/to/dist/vgnav.css" rel="stylesheet" />
<hyperlink href="/path/to/demo/css/vgnav-theme.css" rel="stylesheet" />

2. Create a multi-level dropdown navbar from nested HTML lists as follows:

<nav class="vg-nav">
  <ul class="vg-nav-wrapper">
    <li class="lively">
      <a href="/">House web page</a>
    </li>
    <li class="dropdown">
      <a href="#">Left dropdown</a>
      <ul class="left">
        <li><a href="/">Any web page</a></li>
        <li class="dropdown">
          <a href="#">Second stage</a>
          <ul class="left">
            <li><a href="/">One other web page</a></li>
            <li><a href="/">Any web page</a></li>
            <li class="dropdown">
              <a href="#">Third stage</a>
              <ul class="left">
                <li><a href="/">Any web page</a></li>
                <li><a href="/">One other web page</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="/">One other web page</a></li>
      </ul>
    </li>
    <li class="dropdown-mega">
      <a href="/">Mega Menu</a>
      <div class="dropdown-mega-container">
        <div class="row">
          <div class="col-md-4 text-left">
            Left
          </div>
          <div class="col-md-4 text-center">
            Middle
          </div>
          <div class="col-md-4 text-right">
            Proper
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#">Proper dropdown</a>
      <ul class="proper">
        <li><a href="/">Any web page</a></li>
        <li class="dropdown">
          <a href="#">Second stage</a>
          <ul class="proper">
            <li><a href="/">One other web page</a></li>
            <li><a href="/">Any web page</a></li>
            <li class="dropdown">
              <a href="#">Third stage</a>
              <ul class="proper">
                <li><a href="/">Any web page</a></li>
                <li><a href="/">One other web page</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="/">One other web page</a></li>
      </ul>
    </li>
  </ul>
</nav>

3. Load the principle JavaScript vgnav.min.js on the finish of the doc. Notice that the plugin has eliminated jQuery dependency since v3.0.

<script src="/path/to/dist/vgnav.umd.js"></script>

4. Initialize the plugin and carried out.

new VGNav({
    // choices
});

5. Decide at which breakpoint the navbar will likely be collapsed right into a hamburger button that permits the customer to toggle the off-canvas menu.

• xxl: Further massive
• xl: Desktop and laptop computer
• lg: Pill panorama
• md: Pill portrait
• sm: Smartphone panorama
• xs: Smartphone portrait

new VGNav({
    increase: 'lg',
});

5. Make the off-canvas aspect nav slide in from the left aspect of the display screen as a substitute.

new VGNav({
    sidebar: {
      placement: 'left',
      clone: null,
      width: 250
    }
});

6. Open the dropdown menus on hover as a substitute of click on.

new VGNav({
    isHover: true
});

7. Decide the situation of the nav. Default: ‘horizontal’.

new VGNav({
    placement: 'vertical'
});

8. Add a customized heading for cellular navigation.

let vg_nav = new VGNav('#myNav',{
    mobileTitle: 'Navigation'
});

9. Customise the toggle ingredient.

new VGNav({
    toggle: '<span class="default"></span>'
});

10. Customise the hamburge button.

new VGNav({
    increase: 'lg',
    mobileTitle: 'Cellular Title',
    hamburger: '<svg id="ham-menue" viewBox="0 0 100 100"><path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"></path><path class="line line2" d="M 20,50 H 80"></path><path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"></path></svg>'
});

11. Transfer hyperlinks to the drop-down menu if the overall width of all hyperlinks is larger than the principle container..

new VGNav({
    transfer: true,
});

Changelog:

2024-06-03

v3.0.5 (2022-06-22)

v3.0.0 (2022-06-22)

• Utterly rewritten, bugs fastened.
• Added VGSidebar and VGSpy plugin

v2.0.5 (2022-06-06)

v2.0.4 (2022-05-18)

v2.0.3 (2021-07-22)

• Added heading for cellular navigation. Specify within the settings {mobileTitle: ‘Navigation’}

v2.0.2 (2020-11-21)

v2.0.1 (2020-11-14)

v2.0.0 (2020-11-09)

• Modified plugin markup
• Added callbacks
• Mounted bugs

v1.1.5 (2020-07-25)

v1.1.4 (2020-07-06)

2020-06-29

2020-06-03

2020-05-09

2020-03-25

• Toggle customization
• Minor bugs fastened

2020-03-18

2020-03-17

2020-03-10

2020-03-05

2020-03-03

This superior jQuery plugin is developed by vegas-dev. For extra Superior Usages, please verify the demo web page or go to the official web site.