title: Headless UI Dropdown - Open menu above the button
body: <p>Headless UI provides an example for a dropdown menu, where when you click the button, the dropdown opens below.</p>
  <p><a href="https://i.stack.imgur.com/Y7CL7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Y7CL7.png" alt="enter image description here" /></a></p>
  <p>The code for this is here:</p>
  <pre><code>import { Menu, Transition } from '@headlessui/react'
  import { Fragment, useEffect, useRef, useState } from 'react'
  import { ChevronDownIcon } from '@heroicons/react/solid'
  
  export default function Example() {
    return (
      &lt;div className=&quot;w-56 text-right fixed top-16&quot;&gt;
        &lt;Menu as=&quot;div&quot; className=&quot;relative inline-block text-left&quot;&gt;
          &lt;div&gt;
            &lt;Menu.Button className=&quot;inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75&quot;&gt;
              Options
              &lt;ChevronDownIcon
                className=&quot;w-5 h-5 ml-2 -mr-1 text-violet-200 hover:text-violet-100&quot;
                aria-hidden=&quot;true&quot;
              /&gt;
            &lt;/Menu.Button&gt;
          &lt;/div&gt;
          &lt;Transition
            as={Fragment}
            enter=&quot;transition ease-out duration-100&quot;
            enterFrom=&quot;transform opacity-0 scale-95&quot;
            enterTo=&quot;transform opacity-100 scale-100&quot;
            leave=&quot;transition ease-in duration-75&quot;
            leaveFrom=&quot;transform opacity-100 scale-100&quot;
            leaveTo=&quot;transform opacity-0 scale-95&quot;
          &gt;
            &lt;Menu.Items className=&quot;absolute right-0 w-56 mt-2 origin-top-right bg-white divide-y divide-gray-100 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none&quot;&gt;
              &lt;div className=&quot;px-1 py-1 &quot;&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      className={`${
                        active ? 'bg-violet-500 text-white' : 'text-gray-900'
                      } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                    &gt;
                      {active ? (
                        &lt;EditActiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      ) : (
                        &lt;EditInactiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      )}
                      Edit
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      className={`${
                        active ? 'bg-violet-500 text-white' : 'text-gray-900'
                      } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                    &gt;
                      {active ? (
                        &lt;DuplicateActiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      ) : (
                        &lt;DuplicateInactiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      )}
                      Duplicate
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
              &lt;/div&gt;
              &lt;div className=&quot;px-1 py-1&quot;&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      className={`${
                        active ? 'bg-violet-500 text-white' : 'text-gray-900'
                      } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                    &gt;
                      {active ? (
                        &lt;ArchiveActiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      ) : (
                        &lt;ArchiveInactiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      )}
                      Archive
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      className={`${
                        active ? 'bg-violet-500 text-white' : 'text-gray-900'
                      } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                    &gt;
                      {active ? (
                        &lt;MoveActiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      ) : (
                        &lt;MoveInactiveIcon
                          className=&quot;w-5 h-5 mr-2&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      )}
                      Move
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
              &lt;/div&gt;
              &lt;div className=&quot;px-1 py-1&quot;&gt;
                &lt;Menu.Item&gt;
                  {({ active }) =&gt; (
                    &lt;button
                      className={`${
                        active ? 'bg-violet-500 text-white' : 'text-gray-900'
                      } group flex rounded-md items-center w-full px-2 py-2 text-sm`}
                    &gt;
                      {active ? (
                        &lt;DeleteActiveIcon
                          className=&quot;w-5 h-5 mr-2 text-violet-400&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      ) : (
                        &lt;DeleteInactiveIcon
                          className=&quot;w-5 h-5 mr-2 text-violet-400&quot;
                          aria-hidden=&quot;true&quot;
                        /&gt;
                      )}
                      Delete
                    &lt;/button&gt;
                  )}
                &lt;/Menu.Item&gt;
              &lt;/div&gt;
            &lt;/Menu.Items&gt;
          &lt;/Transition&gt;
        &lt;/Menu&gt;
      &lt;/div&gt;
    )
  }
  
  function EditInactiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;path
          d=&quot;M4 13V16H7L16 7L13 4L4 13Z&quot;
          fill=&quot;#EDE9FE&quot;
          stroke=&quot;#A78BFA&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
      &lt;/svg&gt;
    )
  }
  
  function EditActiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;path
          d=&quot;M4 13V16H7L16 7L13 4L4 13Z&quot;
          fill=&quot;#8B5CF6&quot;
          stroke=&quot;#C4B5FD&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
      &lt;/svg&gt;
    )
  }
  
  function DuplicateInactiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;path
          d=&quot;M4 4H12V12H4V4Z&quot;
          fill=&quot;#EDE9FE&quot;
          stroke=&quot;#A78BFA&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;path
          d=&quot;M8 8H16V16H8V8Z&quot;
          fill=&quot;#EDE9FE&quot;
          stroke=&quot;#A78BFA&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
      &lt;/svg&gt;
    )
  }
  
  function DuplicateActiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;path
          d=&quot;M4 4H12V12H4V4Z&quot;
          fill=&quot;#8B5CF6&quot;
          stroke=&quot;#C4B5FD&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;path
          d=&quot;M8 8H16V16H8V8Z&quot;
          fill=&quot;#8B5CF6&quot;
          stroke=&quot;#C4B5FD&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
      &lt;/svg&gt;
    )
  }
  
  function ArchiveInactiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;rect
          x=&quot;5&quot;
          y=&quot;8&quot;
          width=&quot;10&quot;
          height=&quot;8&quot;
          fill=&quot;#EDE9FE&quot;
          stroke=&quot;#A78BFA&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;rect
          x=&quot;4&quot;
          y=&quot;4&quot;
          width=&quot;12&quot;
          height=&quot;4&quot;
          fill=&quot;#EDE9FE&quot;
          stroke=&quot;#A78BFA&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;path d=&quot;M8 12H12&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
      &lt;/svg&gt;
    )
  }
  
  function ArchiveActiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;rect
          x=&quot;5&quot;
          y=&quot;8&quot;
          width=&quot;10&quot;
          height=&quot;8&quot;
          fill=&quot;#8B5CF6&quot;
          stroke=&quot;#C4B5FD&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;rect
          x=&quot;4&quot;
          y=&quot;4&quot;
          width=&quot;12&quot;
          height=&quot;4&quot;
          fill=&quot;#8B5CF6&quot;
          stroke=&quot;#C4B5FD&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;path d=&quot;M8 12H12&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
      &lt;/svg&gt;
    )
  }
  
  function MoveInactiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;path d=&quot;M10 4H16V10&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
        &lt;path d=&quot;M16 4L8 12&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
        &lt;path d=&quot;M8 6H4V16H14V12&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
      &lt;/svg&gt;
    )
  }
  
  function MoveActiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;path d=&quot;M10 4H16V10&quot; stroke=&quot;#C4B5FD&quot; strokeWidth=&quot;2&quot; /&gt;
        &lt;path d=&quot;M16 4L8 12&quot; stroke=&quot;#C4B5FD&quot; strokeWidth=&quot;2&quot; /&gt;
        &lt;path d=&quot;M8 6H4V16H14V12&quot; stroke=&quot;#C4B5FD&quot; strokeWidth=&quot;2&quot; /&gt;
      &lt;/svg&gt;
    )
  }
  
  function DeleteInactiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;rect
          x=&quot;5&quot;
          y=&quot;6&quot;
          width=&quot;10&quot;
          height=&quot;10&quot;
          fill=&quot;#EDE9FE&quot;
          stroke=&quot;#A78BFA&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;path d=&quot;M3 6H17&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
        &lt;path d=&quot;M8 6V4H12V6&quot; stroke=&quot;#A78BFA&quot; strokeWidth=&quot;2&quot; /&gt;
      &lt;/svg&gt;
    )
  }
  
  function DeleteActiveIcon(props) {
    return (
      &lt;svg
        {...props}
        viewBox=&quot;0 0 20 20&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
      &gt;
        &lt;rect
          x=&quot;5&quot;
          y=&quot;6&quot;
          width=&quot;10&quot;
          height=&quot;10&quot;
          fill=&quot;#8B5CF6&quot;
          stroke=&quot;#C4B5FD&quot;
          strokeWidth=&quot;2&quot;
        /&gt;
        &lt;path d=&quot;M3 6H17&quot; stroke=&quot;#C4B5FD&quot; strokeWidth=&quot;2&quot; /&gt;
        &lt;path d=&quot;M8 6V4H12V6&quot; stroke=&quot;#C4B5FD&quot; strokeWidth=&quot;2&quot; /&gt;
      &lt;/svg&gt;
    )
  }
  </code></pre>
  <p>What I need to do is to have the dropdown menu open above the button instead of below. Something like below:</p>
  <p><a href="https://i.stack.imgur.com/ewlp1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ewlp1.png" alt="enter image description here" /></a></p>
  <p>Can anyone please help me figure out the correct styling to achieve this? It uses TailwindCSS styles.</p>