# Parts: DropdownMenu to PopoverTrigger (/themes/sdk/reference/ui/parts-3)

```ts
import { … } from '@poltura/theme-sdk/ui';
```

## `DropdownMenu` [#dropdownmenu]

A menu that drops from a button: arrow keys walk its items, typing jumps to one, and Escape or a click outside closes it.

```ts
DropdownMenu(props: DropdownMenuProps): ReactNode
```

**Props:** [`DropdownMenuProps`](/themes/sdk/reference/ui/types-1#dropdownmenuprops)

**Example**

```tsx
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@poltura/theme-sdk/ui';

export function SortMenu({ onSort }: { onSort: (order: 'new' | 'price') => void }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Sort</DropdownMenuTrigger>
      <DropdownMenuContent align='end'>
        <DropdownMenuItem onSelect={() => onSort('new')}>Newest</DropdownMenuItem>
        <DropdownMenuItem onSelect={() => onSort('price')}>Price</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
```

## `DropdownMenuTrigger` [#dropdownmenutrigger]

The button that opens a [`DropdownMenu`](/themes/sdk/reference/ui/parts-3#dropdownmenu); it carries `data-state="open"` while the menu is open.

```ts
DropdownMenuTrigger(props: DropdownMenuTriggerProps): ReactNode
```

**Props:** [`DropdownMenuTriggerProps`](/themes/sdk/reference/ui/types-1#dropdownmenutriggerprops)

**Example**

```tsx
import { DropdownMenuTrigger } from '@poltura/theme-sdk/ui';

export function MoreButton() {
  return (
    <DropdownMenuTrigger className='rounded-md px-2 data-[state=open]:bg-muted'>
      More
    </DropdownMenuTrigger>
  );
}
```

## `DropdownMenuContent` [#dropdownmenucontent]

The menu's panel, drawn over the page under its button and kept inside the window.

```ts
DropdownMenuContent(props: DropdownMenuContentProps): ReactNode
```

**Props:** [`DropdownMenuContentProps`](/themes/sdk/reference/ui/types-1#dropdownmenucontentprops)

**Example**

```tsx
import { DropdownMenuContent, DropdownMenuItem } from '@poltura/theme-sdk/ui';

export function ShareItems({ onCopy }: { onCopy: () => void }) {
  return (
    <DropdownMenuContent align='start' className='w-48'>
      <DropdownMenuItem onSelect={onCopy}>Copy link</DropdownMenuItem>
    </DropdownMenuContent>
  );
}
```

## `DropdownMenuItem` [#dropdownmenuitem]

One item of a [`DropdownMenu`](/themes/sdk/reference/ui/parts-3#dropdownmenu); with `asChild` a link becomes the item itself.

```ts
DropdownMenuItem(props: DropdownMenuItemProps): ReactNode
```

**Props:** [`DropdownMenuItemProps`](/themes/sdk/reference/ui/types-1#dropdownmenuitemprops)

**Example**

```tsx
import { Link } from '@poltura/theme-sdk/routing';
import { DropdownMenuItem } from '@poltura/theme-sdk/ui';

export function OrdersItem() {
  return (
    <DropdownMenuItem asChild>
      <Link href='/profile/orders'>Orders</Link>
    </DropdownMenuItem>
  );
}
```

## `Sheet` [#sheet]

A drawer that slides in from an edge of the window, such as a mobile menu or a filter panel.

```ts
Sheet(props: SheetProps): ReactNode
```

**Props:** [`SheetProps`](/themes/sdk/reference/ui/types-1#sheetprops)

**Example**

```tsx
import { useState } from 'react';
import { Button, Sheet, SheetContent, SheetHeader, SheetTitle } from '@poltura/theme-sdk/ui';

export function Filters() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button variant='outline' onClick={() => setOpen(true)}>
        Filters
      </Button>
      <Sheet open={open} onOpenChange={setOpen}>
        <SheetContent side='left'>
          <SheetHeader>
            <SheetTitle>Filters</SheetTitle>
          </SheetHeader>
        </SheetContent>
      </Sheet>
    </>
  );
}
```

## `SheetContent` [#sheetcontent]

The drawer's panel over a dimmed page, full height on the left and right edges.

```ts
SheetContent(props: SheetContentProps): ReactNode
```

**Props:** [`SheetContentProps`](/themes/sdk/reference/ui/types-1#sheetcontentprops)

**Example**

```tsx
import { SheetContent, SheetTitle } from '@poltura/theme-sdk/ui';

export function CartDrawerBody() {
  return (
    <SheetContent side='right' className='w-96'>
      <SheetTitle>Your bag</SheetTitle>
    </SheetContent>
  );
}
```

## `SheetHeader` [#sheetheader]

The top of a drawer, holding its title.

```ts
SheetHeader(props: SheetHeaderProps): ReactNode
```

**Props:** [`SheetHeaderProps`](/themes/sdk/reference/ui/types-1#sheetheaderprops)

**Example**

```tsx
import { SheetHeader, SheetTitle } from '@poltura/theme-sdk/ui';

export function MenuHeader() {
  return (
    <SheetHeader className='border-b'>
      <SheetTitle>Menu</SheetTitle>
    </SheetHeader>
  );
}
```

## `SheetTitle` [#sheettitle]

The drawer's title; screen readers announce it when the drawer opens.

```ts
SheetTitle(props: SheetTitleProps): ReactNode
```

**Props:** [`SheetTitleProps`](/themes/sdk/reference/ui/types-1#sheettitleprops)

**Example**

```tsx
import { SheetTitle } from '@poltura/theme-sdk/ui';

export function HiddenTitle() {
  return <SheetTitle className='sr-only'>Menu</SheetTitle>;
}
```

## `Popover` [#popover]

A panel that opens from a button over the page without dimming it; Escape or a click outside closes it.

```ts
Popover(props: PopoverProps): ReactNode
```

**Props:** [`PopoverProps`](/themes/sdk/reference/ui/types-2#popoverprops)

**Example**

```tsx
import { Popover, PopoverContent, PopoverTrigger } from '@poltura/theme-sdk/ui';

export function ShippingNote() {
  return (
    <Popover>
      <PopoverTrigger className='underline'>Shipping</PopoverTrigger>
      <PopoverContent align='start' className='w-64 p-3 text-sm'>
        Free over 50 EUR, in two working days.
      </PopoverContent>
    </Popover>
  );
}
```

## `PopoverTrigger` [#popovertrigger]

The button that opens a [`Popover`](/themes/sdk/reference/ui/parts-3#popover); it carries `data-state="open"` while the popover is open.

```ts
PopoverTrigger(props: PopoverTriggerProps): ReactNode
```

**Props:** [`PopoverTriggerProps`](/themes/sdk/reference/ui/types-2#popovertriggerprops)

**Example**

```tsx
import { PopoverTrigger } from '@poltura/theme-sdk/ui';

export function InfoButton() {
  return <PopoverTrigger className='size-8 rounded-full border'>i</PopoverTrigger>;
}
```