Use Foundation Accordion Menu component directly

Dash Python
1

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

https://foundation.zurb.com/sites/docs/accordion-menu.html

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

<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?

    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:

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

and this

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

but get a Syntax errors.

2

data-* attributes are indeed supported in Dash (see this merged PR)

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?