<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content>
    <.menu class="w-56">
      <.menu_label>Account</.menu_label>
      <.menu_separator />
      <.menu_group>
        <.menu_item>
          <.icon name="hero-user" class="mr-2 h-4 w-4" />
          <span>Profile</span>
          <.menu_shortcut>⌘P</.menu_shortcut>
        </.menu_item>
        <.menu_item>
          <.icon name="hero-banknotes" class="mr-2 h-4 w-4" />
          <span>Billing</span>
          <.menu_shortcut>⌘B</.menu_shortcut>
        </.menu_item>
        <.menu_item>
          <.icon name="hero-cog-6-tooth" class="mr-2 h-4 w-4" />
          <span>Settings</span>
          <.menu_shortcut>⌘S</.menu_shortcut>
        </.menu_item>
      </.menu_group>
      <.menu_separator />
      <.menu_group>
        <.menu_item>
          <.icon name="hero-users" class="mr-2 h-4 w-4" />
          <span>Team</span>
        </.menu_item>
        <.menu_item disabled>
          <.icon name="hero-plus" class="mr-2 h-4 w-4" />
          <span>New team</span>
          <.menu_shortcut>⌘T</.menu_shortcut>
        </.menu_item>
      </.menu_group>
    </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content side="left">
  <.menu>
  Dropdown content left
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content side="right">
  <.menu>
  Dropdown content right
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content side="top">
  <.menu>
  Dropdown content top
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content side="bottom">
  <.menu>
  Dropdown content bottom
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content align="start">
  <.menu>
  Dropdown content start
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content align="center">
  <.menu>
  Dropdown content center
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>

<div class="mt-24">
<.dropdown_menu>
      <.dropdown_menu_trigger>
        <.button variant="outline">Click me</.button>
      </.dropdown_menu_trigger>
<.dropdown_menu_content align="end">
  <.menu>
  Dropdown content end
  </.menu>
</.dropdown_menu_content>
</.dropdown_menu>
</div>