+ {() => {
+ const Content = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ return (
+
+
+ } placement='top'>
+
+
+
+
+ } placement='left'>
+
+
+
+
+ } placement='bottom'>
+
+
+
+
+ } placement='right'>
+
+
+
+
+ );
+ }}
+
+
+> Todos os lados possuem mais duas direções. Por exemplo: `top`, `top-start` e `top-end`. Sempre adicionando o sufixo (`-start` e `-end`).
+
+| prop | tipo | obrigatório | padrão | descrição |
+| --------- | ------------------- | ----------- | -------------- | --------------------------- |
+| placement | `DropdownPlacement` | `false` | `bottom-start` | Posicionamento do conteúdo. |
+| content | `React.ReactNode` | `true` | - | Conteúdo oculto. |
+| children | `React.ReactNode` | `true` | - | - |
+| arrow | `boolean` | `false` | `true` | - |
+| onOpen | `function` | `false` | - | - |
+| onClose | `function` | `false` | - | - |
diff --git a/src/pages/ui-components/Dropdown/index.tsx b/src/pages/ui-components/Dropdown/index.tsx
new file mode 100644
index 000000000..b2030ef5b
--- /dev/null
+++ b/src/pages/ui-components/Dropdown/index.tsx
@@ -0,0 +1,207 @@
+import * as React from 'react';
+
+import { flushSync } from 'react-dom';
+
+import useBoolean from '@eduzz/houston-hooks/useBoolean';
+import styled, { css, StyledProp } from '@eduzz/houston-styles';
+
+import Popover from '../Popover';
+import usePopover from '../Popover/usePopover';
+import Root from './Root';
+
+export type DropdownPlacement =
+ | 'bottom-end'
+ | 'bottom-start'
+ | 'bottom'
+ | 'left-end'
+ | 'left-start'
+ | 'left'
+ | 'right-end'
+ | 'right-start'
+ | 'right'
+ | 'top-end'
+ | 'top-start'
+ | 'top';
+
+export interface DropdownProps {
+ /**
+ * Position
+ * @default `bottom-start`
+ */
+ placement?: DropdownPlacement;
+ /**
+ * Hidden content
+ */
+ content: React.ReactNode;
+ /**
+ * Display arrow position
+ * @default `true`
+ */
+ arrow?: boolean;
+ children: React.ReactNode;
+ onClose?: () => void;
+ onOpen?: () => void;
+}
+
+export const ARROW_SIZE = 12;
+export const ARROW_HALF_SIZE = ARROW_SIZE / 2;
+
+const Dropdown = ({
+ children,
+ onOpen,
+ onClose,
+ placement = 'bottom-start',
+ arrow = true,
+ content,
+ className,
+ id: idProp,
+ ...rest
+}: DropdownProps & StyledProp & React.HTMLAttributes
+