diff --git a/components/src/components/molecules/Dropdown/Dropdown.test.tsx b/components/src/components/molecules/Dropdown/Dropdown.test.tsx
index 1da9c20c..5b49e273 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.test.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.test.tsx
@@ -139,4 +139,25 @@ describe('', () => {
})
expect(screen.getByTestId('scrollbox-bottom-intersect')).toBeVisible()
})
+ it('should allow having items as links', async () => {
+ render(
+ ,
+ )
+
+ userEvent.click(screen.getByText('menu'))
+
+ expect(screen.getByText('Example')).toHaveAttribute(
+ 'href',
+ 'https://example.com',
+ )
+ })
})
diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
index 5ed64ddd..6536806f 100644
--- a/components/src/components/molecules/Dropdown/Dropdown.tsx
+++ b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -25,6 +25,7 @@ export type DropdownItemObject = {
color?: Colors
disabled?: boolean
showIndicator?: boolean | Colors
+ href?: string
}
export type DropdownItem =
@@ -298,6 +299,7 @@ const DropdownMenu = React.forwardRef(
as,
wrapper,
showIndicator,
+ href,
} = item as DropdownItemObject
const props: React.ComponentProps = {
@@ -316,6 +318,7 @@ const DropdownMenu = React.forwardRef(
{label}
>
),
+ href,
}
if (wrapper) {