How to open a dropdown menu automatically

[rhscjohn-dev]

Trying to get a dropdown menu to display with out using a button. According to the Primitives API Reference, on the DropdownMenu.root, there is a property called - open. I am assuming that setting that to 'true' would automatically display the dropdown menu. Unfortunately that does not seem the case.

Code.

<DropdownMenu.Root open={true} >
    <DropdownMenu.Content>
      <DropdownMenu.Group>
        <DropdownMenu.Label>My Account</DropdownMenu.Label>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Billing</DropdownMenu.Item>
        <DropdownMenu.Item>Team</DropdownMenu.Item>
        <DropdownMenu.Item>Subscription</DropdownMenu.Item>
      </DropdownMenu.Group>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

Maybe this is not the proper way? Any ideas on how to do this?

Thanks.

[shyakadavis]

Hi @rhscjohn-dev ;

• So, if you "just" want it open by default, then you need to bind that open prop to a state variable.
• Regardless of whether you don't want to display the Trigger component, you still need it present so that the Content knows which place to anchor itself unto, and as a hack/workaround, just use css to hide it. Couple of problems with this, though:
  • Once you click outside the content, it'll close and you won't have a trigger to re-open it. So, be sure to set the closeOnOutsideClick prop to false.
  • If you click on any item in the content body, it'll close the dropdown-menu, again, with no trigger to re-open. So, be sure to set the closeOnItemClick prop to false.

Simply do something like this:

<script lang="ts">
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";

  let open = true;
</script>

<DropdownMenu.Root bind:open closeOnOutsideClick={false} closeOnItemClick={false}>
  <DropdownMenu.Trigger class="hidden">Open</DropdownMenu.Trigger>
    <DropdownMenu.Content>
      <DropdownMenu.Group>
        <DropdownMenu.Label>My Account</DropdownMenu.Label>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Billing</DropdownMenu.Item>
        <DropdownMenu.Item>Team</DropdownMenu.Item>
        <DropdownMenu.Item>Subscription</DropdownMenu.Item>
      </DropdownMenu.Group>
    </DropdownMenu.Content>
  </DropdownMenu.Root>

I think that covers most of the edge-cases. Does this meet your needs? LMK how it goes. 🙂

[rhscjohn-dev]

Just one problem. Using <DropdownMenu.Trigger class="hidden">Open</DropdownMenu.Trigger> positions the dropdown menu at the top left corner of the window.

Using this <DropdownMenu.Trigger class=""></DropdownMenu.Trigger> solves that problem.