Materialize: multiple dropdowns, separate menus, separate triggers

[hoardingnuts]

Is it supported to have two different dropdowns displayed simultaneously (on the same screen)? I haven't been able to configure this.

Here's an example

<a class='dropdown-button' href='javascript:void()' data-activates='dropdown1'>Drop 1</a>
<ul id='dropdown1' class='dropdown-content'>
  <li>1 one</li>
  <li>1 two</li>
  <li>1 three</li>
</ul>

<a class='dropdown-button' href='javascript:void()' data-activates='dropdown2'>Drop 2</a>
<ul id='dropdown2' class='dropdown-content'>
  <li>2 one</li>
  <li>2 two</li>
  <li>2 three</li>
</ul>

$('.dropdown-button').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
});

[acburst]

As of now you can only have one dropdown open at a time. I dont think we have any plans to change this at the moment

[hoardingnuts]

They don't have to be open at the same time. I just want to have two menus in the DOM tree, each with their own ID. Is this not possible? A workaround I can think of is to have a single

menu, and to activate/trigger it to open, populate it, and reposition it dynamically from multiple sources. Is this what you'd recommend? Can you just provide any example use case that is supported for this scenario?

[chrislowcher]

Any update on this? It would be nice to be able to have more than 1 dropdown in my nav.

[wahmal]

yeah, i want to multiple trigger to open dropdown, but not working.

[gdoron]

@acburst is it possible having dropdown that opens a different dropdown?
Something similar to what Amazon has:

[singhshashi]

@arabesq610 I did this by specifying a unique Id to each of the anchor tags and then used that Id to initialize the dropwon using jquery.

<a id='btndropdown1' class='dropdown-button' href='javascript:void()' data-activates='dropdown1'>Drop 1</a>
<ul id='dropdown1' class='dropdown-content'>
  <li>1 one</li>
  <li>1 two</li>
  <li>1 three</li>
</ul>

<a id='btndropdown2' class='dropdown-button' href='javascript:void()' data-activates='dropdown2'>Drop 2</a>
<ul id='dropdown2' class='dropdown-content'>
  <li>2 one</li>
  <li>2 two</li>
  <li>2 three</li>
</ul>

and then for initializing.

$('#btndropdown1').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
});

$('#btndropdown2').dropdown({
  inDuration: 300,
  outDuration: 225,
  constrain_width: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  belowOrigin: false // Displays dropdown below the button
});

Update:

I see a couple of people reacted with a thumbs down. If you could please elaborate why, that would be helpful?

[Dogfalo]

For now we're staying with the current functionality of dropdown where you can only have one open at a time.

[kroteDev]

@singhshashi thank you! that solution worked like a charm. I think people are misunderstanding the question. We don't want open all menu's at same time. we just want to have multiples dropdown (working) on the same menu. E.g:
User > edit account
Products > New product.
Category > New Category

[Chrisx84]

well this sucks for those who builds the menu bar dynamically with php arrays.

[crshovrd41]

@singhshashi Your solution works, but when I align one left and one right, it breaks the modals. The left modal is no longer clickable.

Here is the code:
<div id="mapclient" class="modal modal-fixed-footer">
<div class="modal-content left-align">
<a id='btndropdown1' class='dropdown-trigger btn' href='#' data-target='dropdown1'>CW Companies</a>
<ul id='dropdown1' class='dropdown-content'>

        </ul>
    </div>
    <div class="modal-content right-align">
        <a id='btndropdown2' class='dropdown-trigger btn' href='#' data-target='dropdown2'>MS Tenants</a>
        <ul id='dropdown2' class='dropdown-content'>

        </ul>
    </div>
    <div class="modal-footer">
        <a href="#!" class="modal-action modal-close btn teal lighten-1">Yes</a>
        <a href="#!" class="modal-action modal-close btn orange darken-1">No</a>
        <a href="#!" class="modal-action modal-close btn deep-orange darken-2">Cancel</a>
    </div>
</div>`

Can you help me understand why this would have this behavior