# Use Foundation Accordion Menu component directly

**URL:** <https://community.plotly.com/t/use-foundation-accordion-menu-component-directly/18651>\
**Category:** Dash Python\
**Created:** [January 27, 2019, 8:26pm UTC](https://community.plotly.com/t/use-foundation-accordion-menu-component-directly/18651 "2019-01-27T20:26:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mickdg](https://avatars.discourse-cdn.com/v4/letter/m/5f8ce5/32.png) [@mickdg](https://community.plotly.com/u/mickdg)\
**Post date:** [January 27, 2019, 8:26pm UTC](https://community.plotly.com/t/use-foundation-accordion-menu-component-directly/18651/1 "2019-01-27T20:26:15Z")

</div>

I’m trying to use it in my Dash layout.

[https://foundation.zurb.com/sites/docs/accordion-menu.html](https://foundation.zurb.com/sites/docs/accordion-menu.html)

Something along these lines, except I want to use the Grid within the accordion.

```auto
<ul class="vertical menu accordion-menu" data-accordion-menu>
  <li>
    <a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
</ul>

```

I can get everything except the data-accordion-menu bit, not sure if/how to wrap that?

Is there a way (i.e. am I missing - or misusing - a keyword option? data-\*?) using generic Div, Ul, li components?

Or dangerously\_set\_inner?

```auto
    html.Div([
        html.Nav(className="vertical menu accordion-menu", children=[
            html.Li(children=[
                html.A(href='Title'),
                build_foundation_row([graph1_div, graph2_div], cols=[6, 6]),
                build_foundation_row([dropdown_div], cols=[6]),
                build_foundation_row([graph3_div], cols=[6]),
            ]),
        ])
    ]),

```

I’ve tried doing this on the Nav line:

```auto
        html.Nav(className="vertical menu accordion-menu", **{"data-accordion-menu": "true"}, children=[

```

and this

```auto
        html.Nav(className="vertical menu accordion-menu", **{"data-accordion-menu": ""}, children=[

```

but get a Syntax errors.

---

<div class="post-metadata">

**Author:** ![nedned](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nedned/32/8795_2.png) [@nedned](https://community.plotly.com/u/nedned)\
**Post date:** [January 31, 2019, 1:36pm UTC](https://community.plotly.com/t/use-foundation-accordion-menu-component-directly/18651/2 "2019-01-31T13:36:00Z")

</div>

data-\* attributes are indeed supported in Dash (see this [merged PR](https://github.com/plotly/dash/pull/237))

Maybe double check that you have the latest Dash installed. If you’re still experiencing the problem, can you post the complete html.Nav snippet (yours is truncated) along with the syntax error?