diff --git a/bun.lockb b/bun.lockb
index 33f345b..d87a92e 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 0787322..5333a63 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
     "@codemirror/theme-one-dark": "^6.1.2",
+    "@headlessui/react": "^2.2.0",
     "@monaco-editor/react": "^4.6.0",
     "@uiw/react-codemirror": "^4.23.6",
     "class-variance-authority": "^0.7.1",
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
index e00a239..7278390 100644
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { createPortal } from "react-dom";
+import { Menu } from "@headlessui/react";
 import { cn } from "../../utils/cn";
 import { ZINDEX } from "../../utils/z-index";
 
@@ -7,8 +7,6 @@ export interface DropdownProps {
   trigger: React.ReactNode;
   children: React.ReactNode;
   align?: "left" | "right";
-  direction?: "down" | "up";
-  variant?: "default" | "nav";
   className?: string;
 }
 
@@ -16,141 +14,87 @@ export const Dropdown: React.FC<DropdownProps> = ({
   trigger,
   children,
   align = "left",
-  direction = "down",
-  variant = "default",
   className,
 }) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [position, setPosition] = React.useState<{ top?: number; bottom?: number; left: number; right: number }>({ left: 0, right: 0 });
-  const dropdownRef = React.useRef<HTMLDivElement>(null);
-  const triggerRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    if (variant === "nav") {
-      document.addEventListener("keydown", handleEscape);
-    }
-    
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-      if (variant === "nav") {
-        document.removeEventListener("keydown", handleEscape);
-      }
-    };
-  }, [variant]);
-
-  // Update position when scrolling or resizing
-  React.useEffect(() => {
-    if (!isOpen) return;
-
-    const updatePosition = () => {
-      if (!triggerRef.current) return;
-      const rect = triggerRef.current.getBoundingClientRect();
-      
-      setPosition({
-        left: rect.left,
-        right: window.innerWidth - rect.right,
-        ...(direction === 'down' 
-          ? { top: rect.bottom + 8 }
-          : { bottom: window.innerHeight - rect.top + 8 }
-        ),
-      });
-    };
-
-    updatePosition();
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
-
-    return () => {
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
-    };
-  }, [isOpen, direction]);
-
-  const triggerClasses = cn({
-    "cursor-pointer": true,
-    "flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 transition-colors": 
-      variant === "nav",
-  });
-
-  const menuClasses = cn(
-    "absolute rounded-lg shadow-lg min-w-[8rem] py-1",
-    variant === "default" && [
-      "bg-white dark:bg-gray-900",
-      "border border-gray-200 dark:border-gray-800",
-    ],
-    variant === "nav" && [
-      "bg-white dark:bg-gray-800",
-      "border border-gray-200 dark:border-gray-700",
-      "w-48 rounded-md",
-    ],
-    {
-      "left-0": align === "left",
-      "right-0": align === "right",
-      "top-full mt-2": direction === "down",
-      "bottom-full mb-2": direction === "up",
-    },
-    className
-  );
-
   return (
-    <div className="relative inline-block" ref={dropdownRef}>
-      <div 
-        ref={triggerRef}
-        onClick={() => setIsOpen(!isOpen)} 
-        className={triggerClasses}
-      >
+    <Menu as="div" className="relative inline-block text-left">
+      <Menu.Button className="inline-flex cursor-pointer">
         {trigger}
-      </div>
-      {isOpen && createPortal(
-        <div
-          className={menuClasses}
-          style={{
-            position: 'fixed',
-            ...position,
-            zIndex: ZINDEX.dropdown,
-          }}
-        >
-          {children}
-        </div>,
-        document.body
-      )}
-    </div>
+      </Menu.Button>
+
+      <Menu.Items
+        className={cn(
+          "absolute mt-2 rounded-lg shadow-lg",
+          "bg-white dark:bg-gray-800",
+          "border border-gray-200 dark:border-gray-700",
+          "focus:outline-none",
+          "min-w-[8rem] py-1",
+          {
+            "left-0": align === "left",
+            "right-0": align === "right",
+          },
+          className
+        )}
+        style={{ zIndex: ZINDEX.dropdown }}
+      >
+        {children}
+      </Menu.Items>
+    </Menu>
   );
 };
 
-export interface DropdownItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  icon?: React.ReactNode;
+interface DropdownItemProps {
+  children: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  className?: string;
 }
 
-export const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
-  ({ className, children, icon, ...props }, ref) => (
-    <button
-      ref={ref}
-      className={cn(
-        "flex w-full items-center px-3 py-2 text-sm gap-2",
-        "text-gray-700 dark:text-gray-200",
-        "hover:bg-gray-100 dark:hover:bg-gray-800",
-        "focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800",
-        className
-      )}
-      {...props}
-    >
-      {icon}
-      {children}
-    </button>
-  )
+export const DropdownItem = React.forwardRef<HTMLDivElement, DropdownItemProps>(
+  ({ children, href, onClick, className }, ref) => {
+    const content = (
+      <div
+        ref={ref}
+        className={cn(
+          "w-full px-4 py-2 text-sm",
+          "text-gray-700 dark:text-gray-200",
+          className
+        )}
+      >
+        {children}
+      </div>
+    );
+
+    return (
+      <Menu.Item>
+        {({ active }) => 
+          href ? (
+            <a 
+              href={href} 
+              onClick={onClick}
+              className={cn(
+                "block w-full",
+                active && "bg-gray-100 dark:bg-gray-700"
+              )}
+            >
+              {content}
+            </a>
+          ) : (
+            <button 
+              type="button" 
+              onClick={onClick}
+              className={cn(
+                "block w-full text-left",
+                active && "bg-gray-100 dark:bg-gray-700"
+              )}
+            >
+              {content}
+            </button>
+          )
+        }
+      </Menu.Item>
+    );
+  }
 );
+
 DropdownItem.displayName = "DropdownItem"; 
\ No newline at end of file
diff --git a/src/components/navigation/NavMenu.tsx b/src/components/navigation/NavMenu.tsx
index e01c292..179e1e4 100644
--- a/src/components/navigation/NavMenu.tsx
+++ b/src/components/navigation/NavMenu.tsx
@@ -3,31 +3,23 @@ import { cn } from "../../utils/cn";
 import { ChevronDown } from "lucide-react";
 import { Dropdown, DropdownProps } from "../dropdown/Dropdown";
 
-export interface NavMenuProps extends Omit<DropdownProps, 'variant' | 'trigger'> {
+export interface NavMenuProps extends Omit<DropdownProps, 'trigger'> {
   trigger: React.ReactNode;
 }
 
 export const NavMenu: React.FC<NavMenuProps> = ({
   trigger,
   children,
-  direction = "down",
   ...props
 }) => {
   return (
     <Dropdown
       trigger={
-        <>
+        <div className="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-200 transition-colors">
           {trigger}
-          <ChevronDown 
-            className={cn(
-              "h-4 w-4 transition-transform duration-200",
-              direction === "up" && "rotate-180"
-            )} 
-          />
-        </>
+          <ChevronDown className="h-4 w-4" />
+        </div>
       }
-      variant="nav"
-      direction={direction}
       {...props}
     >
       {children}
@@ -52,4 +44,5 @@ export const NavMenuItem = React.forwardRef<
     {children}
   </button>
 ));
+
 NavMenuItem.displayName = "NavMenuItem"; 
\ No newline at end of file
diff --git a/src/docs/pages/components/DropdownPage.tsx b/src/docs/pages/components/DropdownPage.tsx
index c9acd1d..8be3c87 100644
--- a/src/docs/pages/components/DropdownPage.tsx
+++ b/src/docs/pages/components/DropdownPage.tsx
@@ -20,15 +20,27 @@ export const DropdownPage = () => {
       description: "The alignment of the dropdown menu",
     },
     {
-      name: "direction",
-      type: "'down' | 'up'",
-      defaultValue: "down",
-      description: "Direction for the menu to expand",
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes for the dropdown menu",
+    },
+  ];
+
+  const dropdownItemProps = [
+    {
+      name: "href",
+      type: "string",
+      description: "Optional URL for link items",
+    },
+    {
+      name: "onClick",
+      type: "() => void",
+      description: "Click handler for the item",
     },
     {
       name: "className",
       type: "string",
-      description: "Additional CSS classes for the dropdown menu",
+      description: "Additional CSS classes",
     },
   ];
 
@@ -36,23 +48,18 @@ export const DropdownPage = () => {
     <div className="space-y-12">
       <ComponentDemo
         title="Dropdown"
-        description="A dropdown menu component that can be triggered by any element."
+        description="An accessible dropdown menu component powered by Headless UI."
         code={`import { Dropdown, DropdownItem } from "av1-c";
 
 const MyComponent = () => (
-  <Dropdown 
-    trigger={<Button>Open Menu</Button>}
-    align="left"
-  >
+  <Dropdown trigger={<Button>Open Menu</Button>}>
     <DropdownItem>Profile</DropdownItem>
     <DropdownItem>Settings</DropdownItem>
     <DropdownItem>Logout</DropdownItem>
   </Dropdown>
 );`}
       >
-        <Dropdown
-          trigger={<Button>Open Menu</Button>}
-        >
+        <Dropdown trigger={<Button>Open Menu</Button>}>
           <DropdownItem>Profile</DropdownItem>
           <DropdownItem>Settings</DropdownItem>
           <DropdownItem>Logout</DropdownItem>
@@ -73,7 +80,7 @@ const MyComponent = () => (
             title="Right Aligned"
             description="Dropdown menu aligned to the right"
             code={`<Dropdown
-  trigger={<Button>Right Menu</Button>}
+  trigger={<Button>Long Buttn with a Right Menu</Button>}
   align="right"
 >
   <DropdownItem>Option 1</DropdownItem>
@@ -82,7 +89,7 @@ const MyComponent = () => (
           >
             <div className="text-right">
               <Dropdown
-                trigger={<Button>Right Menu</Button>}
+                trigger={<Button>Long Buttn with a Right Menu</Button>}
                 align="right"
               >
                 <DropdownItem>Option 1</DropdownItem>
@@ -92,112 +99,89 @@ const MyComponent = () => (
           </ComponentDemo>
 
           <ComponentDemo
-            title="Custom Trigger"
-            description="Using a custom trigger element"
-            code={`<Dropdown
-  trigger={
-    <Button variant="outline">
-      Custom Trigger
-    </Button>
-  }
->
-  <DropdownItem>Action</DropdownItem>
+            title="With Links"
+            description="Dropdown items as links"
+            code={`<Dropdown trigger={<Button>Navigation</Button>}>
+  <DropdownItem href="https://google.com">
+    Google
+  </DropdownItem>
+  <DropdownItem href="/settings">
+    Settings
+  </DropdownItem>
+  <DropdownItem onClick={() => alert('Clicked!')}>
+    Action Button
+  </DropdownItem>
 </Dropdown>`}
           >
-            <Dropdown
-              trigger={
-                <Button variant="outline">
-                  Custom Trigger
-                </Button>
-              }
-            >
-              <DropdownItem>Action</DropdownItem>
+            <Dropdown trigger={<Button>Navigation</Button>}>
+              <DropdownItem href="https://google.com">
+                Google
+              </DropdownItem>
+              <DropdownItem href="/settings">
+                Settings
+              </DropdownItem>
+              <DropdownItem onClick={() => alert('Clicked!')}>
+                Action Button
+              </DropdownItem>
             </Dropdown>
           </ComponentDemo>
 
           <ComponentDemo
-            title="Upward Direction"
-            description="Dropdown menu that expands upward"
-            code={`<Dropdown
-  trigger={<Button>Upward Menu</Button>}
-  direction="up"
->
-  <DropdownItem>Option 1</DropdownItem>
-  <DropdownItem>Option 2</DropdownItem>
-</Dropdown>`}
-          >
-            <div className="text-center mt-16">
-              <Dropdown
-                trigger={<Button>Upward Menu</Button>}
-                direction="up"
-              >
-                <DropdownItem>Option 1</DropdownItem>
-                <DropdownItem>Option 2</DropdownItem>
-              </Dropdown>
-            </div>
-          </ComponentDemo>
-        </div>
-      </section>
-
-      <ComponentDemo
-        title="With Images"
-        description="Dropdown items with images"
-        code={`<Dropdown trigger={<Button>User Menu</Button>}>
+            title="With Icons"
+            description="Dropdown items with icons"
+            code={`<Dropdown trigger={<Button>User Menu</Button>}>
   <DropdownItem>
-    <img 
-      src="/avatars/user1.jpg"
-      alt="User 1 avatar"
-      className="h-5 w-5 rounded-full object-cover"
-    />
-    John Doe
+    <div className="flex items-center gap-2">
+      <img 
+        src="https://github.com/github.png"
+        alt="GitHub"
+        className="h-5 w-5 rounded-full"
+      />
+      GitHub
+    </div>
   </DropdownItem>
   <DropdownItem>
-    <img 
-      src="/avatars/user2.jpg"
-      alt="User 2 avatar"
-      className="h-5 w-5 rounded-full object-cover"
-    />
-    Jane Smith
+    <div className="flex items-center gap-2">
+      <img 
+        src="https://avatars.githubusercontent.com/u/6412038?s=200&v=4"
+        alt="React"
+        className="h-5 w-5 rounded-full"
+      />
+      React
+    </div>
   </DropdownItem>
 </Dropdown>`}
-      >
-        <Dropdown trigger={<Button>User Menu</Button>}>
-          <DropdownItem>
-            <img 
-              src="https://github.com/github.png"
-              alt="GitHub avatar"
-              className="h-5 w-5 rounded-full object-cover"
-            />
-            GitHub
-          </DropdownItem>
-          <DropdownItem>
-            <img 
-              src="https://avatars.githubusercontent.com/u/6412038?s=200&v=4"
-              alt="React avatar"
-              className="h-5 w-5 rounded-full object-cover"
-            />
-            React
-          </DropdownItem>
-        </Dropdown>
-      </ComponentDemo>
+          >
+            <Dropdown trigger={<Button>User Menu</Button>}>
+              <DropdownItem>
+                <div className="flex items-center gap-2">
+                  <img 
+                    src="https://github.com/github.png"
+                    alt="GitHub"
+                    className="h-5 w-5 rounded-full"
+                  />
+                  GitHub
+                </div>
+              </DropdownItem>
+              <DropdownItem>
+                <div className="flex items-center gap-2">
+                  <img 
+                    src="https://avatars.githubusercontent.com/u/6412038?s=200&v=4"
+                    alt="React"
+                    className="h-5 w-5 rounded-full"
+                  />
+                  React
+                </div>
+              </DropdownItem>
+            </Dropdown>
+          </ComponentDemo>
+        </div>
+      </section>
 
       <section>
         <Title level={3}>DropdownItem Properties</Title>
         <div className="mt-4">
-          <PropsTable
-            props={[
-              {
-                name: "icon",
-                type: "ReactNode",
-                description: "Icon element to display",
-              },
-              {
-                name: "className",
-                type: "string",
-                description: "Additional CSS classes",
-              },
-            ]}
-          />
+          <PropsTable props={dropdownItemProps} />
         </div>
       </section>
     </div>
diff --git a/src/docs/pages/components/NavMenuPage.tsx b/src/docs/pages/components/NavMenuPage.tsx
index efc4026..4f0225d 100644
--- a/src/docs/pages/components/NavMenuPage.tsx
+++ b/src/docs/pages/components/NavMenuPage.tsx
@@ -15,16 +15,10 @@ export const NavMenuPage = () => {
       description: "Element that triggers the menu",
     },
     {
-      name: "children",
-      type: "ReactNode",
-      required: true,
-      description: "Menu items",
-    },
-    {
-      name: "direction",
-      type: "'down' | 'up'",
-      defaultValue: "down",
-      description: "Direction for the menu to expand",
+      name: "align",
+      type: "'left' | 'right'",
+      defaultValue: "left",
+      description: "The alignment of the menu",
     },
     {
       name: "className",
@@ -126,49 +120,6 @@ const MyComponent = () => (
               </NavMenu>
             </div>
           </ComponentDemo>
-
-          <ComponentDemo
-            title="Direction"
-            description="NavMenu can expand upward or downward"
-            code={`<NavMenu 
-  trigger="Options" 
-  direction="up"
->
-  <NavMenuItem>Option 1</NavMenuItem>
-  <NavMenuItem>Option 2</NavMenuItem>
-  <NavMenuItem>Option 3</NavMenuItem>
-</NavMenu>
-
-<NavMenu 
-  trigger="Options" 
-  direction="down"
->
-  <NavMenuItem>Option 1</NavMenuItem>
-  <NavMenuItem>Option 2</NavMenuItem>
-  <NavMenuItem>Option 3</NavMenuItem>
-</NavMenu>`}
-          >
-            <div className="flex flex-col gap-4 items-center">
-              <div className="mt-16">
-                <NavMenu 
-                  trigger="Upward Menu" 
-                  direction="up"
-                >
-                  <NavMenuItem>Option 1</NavMenuItem>
-                  <NavMenuItem>Option 2</NavMenuItem>
-                  <NavMenuItem>Option 3</NavMenuItem>
-                </NavMenu>
-              </div>
-              <NavMenu 
-                trigger="Downward Menu" 
-                direction="down"
-              >
-                <NavMenuItem>Option 1</NavMenuItem>
-                <NavMenuItem>Option 2</NavMenuItem>
-                <NavMenuItem>Option 3</NavMenuItem>
-              </NavMenu>
-            </div>
-          </ComponentDemo>
         </div>
       </section>
     </div>