Ace Responsive Menu

Ace Responsive Menu is a lightweight jQuery plugin that creates responsive multi-level navigation menus for websites and admin templates, supporting horizontal, vertical, and accordion layouts.

What is Ace Responsive Menu?

Ace Responsive Menu is a lightweight jQuery plugin that turns a nested HTML list into a responsive multi-level navigation menu. It accepts standard HTML markup with unordered lists and optional FontAwesome icons, and outputs a menu that collapses into a toggle button on smaller screens. The plugin is built by Samson (email: [email protected]) and is available as a public GitHub repository. It supports three display modes — horizontal, vertical, and accordion — and is compatible with Bootstrap.

Key Features

• Fully responsive multi-level menu — Supports up to 4 levels of nested submenus with a mobile toggle button for small screens.
• Three menu styles — Horizontal, vertical, and accordion layouts can be set via a data-menu-style attribute on the root ul element.
• Icon support — Integrated with FontAwesome, so menu items can include icons without extra markup.
• Click and hover events — Menu can be configured to open on mouse click, mouse hover, or a toggle click for accordion mode.
• Lightweight jQuery script — The plugin depends only on jQuery and adds minimal code; the demo uses jQuery 1.10.1.
• Valid HTML5 and CSS3 — The markup and stylesheets are written to pass HTML5 and CSS3 validation.
• Bootstrap compatible — Works alongside Bootstrap components in the same page without style conflicts.
• Cross-browser support — Tested with Internet Explorer 7+, Firefox 3+, Chrome 4+, Safari 4+, and Opera 10+.
• Clean, commented code and help documentation — The source is formatted and commented for easy integration and modification.

Who is it for?

• Web developers building responsive site navigation quickly by dropping in the plugin and initializing it with one line of jQuery.
• Admin template authors who need a sidebar menu that works as horizontal, vertical, or accordion to fit different dashboard layouts.
• Designers using Bootstrap who want a navigation component that matches Bootstrap's grid and styling without custom CSS overrides.

What can you do with Ace Responsive Menu?

• Corporate websites: Add a multi-level dropdown menu that collapses into a hamburger-style toggle on mobile devices, with up to 4 levels of sub-navigation.
• Admin dashboards: Use the vertical or accordion style to create collapsible sidebar menus for settings, reports, and user management sections.
• Portfolio or landing pages: Keep the menu horizontal on desktop and automatically switch to a compact mobile toggle, using the resizeWidth option to match your CSS breakpoint.

How does Ace Responsive Menu work?

The plugin needs three assets: jQuery, the ace-responsive-menu.js file, and ace-responsive-menu.css. You add a <nav> with a .menu-toggle button and a <ul class="ace-responsive-menu"> containing nested <li><ul> for submenus. Then initialize it with $("#demoMenu").aceResponsiveMenu(); and optionally set parameters like resizeWidth: '768', animationSpeed: 'fast', and accoridonExpAll: false to control the breakpoint, animation speed, and accordion expansion behavior.

Pros and cons

• Pros: Small footprint, three layout options, 4-level nesting, FontAwesome icons, Bootstrap compatibility, and support for very old browsers down to IE7 and Chrome 4.
• Cons: Requires jQuery as a dependency (the demo uses jQuery 1.10.1), which may be unnecessary overhead for projects that already use vanilla JavaScript; it does not include an automation build system or module packaging.

FAQ

Does Ace Responsive Menu work with the latest browsers?

The plugin was tested with Internet Explorer 7+, Firefox 3+, Chrome 4+, Safari 4+, and Opera 10+. Because it uses standard jQuery techniques, it is expected to work in current versions of those browsers as well, though the official test list stops at older versions.

Is Ace Responsive Menu free to use?

The source code is publicly available on GitHub, where the repository shows 53 stars. The page does not mention a license, but it is distributed as a freely downloadable jQuery plugin.

How do I change the menu style?

Set the data-menu-style attribute on the root ul element to horizontal, vertical, or accordion. For example, <ul id="demoMenu" class="ace-responsive-menu" data-menu-style="horizontal"> produces a horizontal menu.

Which options can I pass to aceResponsiveMenu?

You can pass an object with three optional parameters: resizeWidth (a string like '768' to match your CSS media query breakpoint), animationSpeed (slow, medium, or fast), and accoridonExpAll (a boolean that expands all accordion items on click when true).

Is Ace Responsive Menu compatible with Bootstrap?

Yes, the plugin is explicitly labeled Bootstrap compatible, so it can be used inside Bootstrap-based pages without conflicting with Bootstrap's own navigation and grid styles.