Skip to content
Skip to content

Accordion Menu

Our flexible menu component makes it easy to build many common navigation patterns.


Usage

<ul class="c-menu c-menu--accordion c-menu--vertical">
  <li class="c-menu__item is-accordion-menu-parent">
    <a href="#" class="c-menu__link">One</a>
    <button class="c-button is-accordion-button">...</button>
    <ul class="c-menu is-accordion-menu">
      <li class="c-menu__item"><a href="#" class="c-menu__link">One sub item</a></li>
      ...
    </ul>
  </li>
  ...
  </ul>

  {{ Menu(
    [
      { "text": "One", "url": "#"
        "children": [
          {
          "id": "",
          "url": "#",
          "text": "One sub item",
          "linkClassList": ""
          }
        ]
      },
      { "text": "Two", "url": "#" },
      { "text": "Three", "url": "#" },
      { "text": "Four", "url": "#" }
    ]
  ) }}