Accordion Menu


Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.


Accordion menus follow the basic Menu syntax of <ul>, <li>, and <a>. To convert a basic menu into an accordion, add the attribute data-accordion-menu. You probably also want it to be vertical, so add the class .vertical as well.

Any <a> will behave like a standard link. However, any <a> paired with a nested <ul> menu will then slide that sub-menu up and down when clicked on.

Watch this part in video

You can use the built-in .nested class to add an indent to a nested menu.

To have a sub-menu already open when the page loads, add the class .is-active to that sub-menu.

edit on codepen button
<ul class="vertical menu" data-accordion-menu>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
  <li><a href="#">Item 2</a></li>

Sass Reference


The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$accordionmenu-arrows Boolean true

Sets if accordion menus have the default arrow styles.

$accordionmenu-arrow-color Color $primary-color

Sets accordion menu arrow color if arrow is used.

$accordionmenu-arrow-size Length 6px

Sets accordion menu arrow size if arrow is used.

JavaScript Reference


The file foundation.accordionMenu.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:

  • foundation.util.keyboard.js
  • foundation.util.motion.js
  • foundation.util.nest.js


Creates a new instance of an accordion menu.

var elem = new Foundation.AccordionMenu(element, options);

Fires these events: AccordionMenu#event:init

element jQuery jQuery object to make into an accordion menu.
options Object Overrides to the default plugin settings.

Plugin Options

Use these options to customize an instance of Accordion Menu. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.

Name Type Default Description
data-slide-speed number 250 Amount of time to animate the opening of a submenu in ms.
data-multi-open boolean true Allow the menu to have multiple open panes.


These events will fire from any element with a Accordion Menu plugin attached.

down.zf.accordionMenu Fires when the menu is done opening.
up.zf.accordionMenu Fires when the menu is done collapsing up.




Closes all panes of the menu.



Opens all panes of the menu.


$('#element').foundation('toggle', $target);

Toggles the open/close state of a submenu.

$target jQuery the submenu to toggle


$('#element').foundation('down', $target);

Opens the sub-menu defined by $target.

Fires these events: AccordionMenu#event:down

$target jQuery Sub-menu to open.


$('#element').foundation('up', $target);

Closes the sub-menu defined by $target. All sub-menus inside the target will be closed as well.

Fires these events: AccordionMenu#event:up

$target jQuery Sub-menu to close.



Destroys an instance of accordion menu.

Fires these events: AccordionMenu#event:destroyed