Materialize dropdown

Archive
1

Hello,

can you please give me a hint how to do the Materialize dropdown?
http://materializecss.com/navbar.html

Thank you, Olli

2

Are you running the materialize theme? If so, perhaps you can submit an issue on that theme project on GitHub?

Have you looked at how the dropdown is implmemented in Antimatter theme? It’s toggled from antimatter.yaml, but the logic and output is all in partials/navigation.html.twig. The styling would all be provided by the materialize css/js that the materialize framework provides.

3

No but I will submit an issue.

Yes but I think the Materialize dropdown is different and I wonder how to deal with the “Dropdown Structure” and the “Dropdown Trigger”:
— html

Logo
---
4

You would just have to edit the partials/navigation.html.twig to add the bits and pieces needed for this dropdown structure.

5

Thank you but what would you do if you had multiple dropdowns? Could you somehow make the dropdown-part dynamic, too?

6

I’m not sure i’m following. The dropdowns will be dynamic because they are built from the page structure. If you mean visually, that’s totally up the CSS you use to render the dropdown.

7

Sorry for my complicated question!
How would you code the id in the “Dropdown-Structure” and the data-activates in the “Dropdown-Trigger” if you had multiple dropdowns?

8

What i would do is when you ‘include’ this navigation menu twig from your template, i would pass in a variable like this:

{% include 'partials/navigation.html.twig' with {'menu_id':'dropdown1'} %}

Then in your navigation.html.twig have something like:

<ul id="{{ menu_id }}" class="dropdown-content">
...

Then if you need another menu on your page you could put:

{% include 'partials/navigation.html.twig' with {'menu_id':'dropdown2'} %}
9

Thank you!