Developers
Start building
Themes/Theme SDK/Modules/ui/Parts: DropdownMenu to PopoverTrigger

Parts: DropdownMenu to PopoverTrigger

The parts of @poltura/theme-sdk/ui, DropdownMenu to PopoverTrigger.

On this page
import { … } from '@poltura/theme-sdk/ui';

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

DropdownMenu(props: DropdownMenuProps): ReactNode

Props: DropdownMenuProps

Example

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>
  );
}

The button that opens a DropdownMenu; it carries data-state="open" while the menu is open.

DropdownMenuTrigger(props: DropdownMenuTriggerProps): ReactNode

Props: DropdownMenuTriggerProps

Example

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

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

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

DropdownMenuContent(props: DropdownMenuContentProps): ReactNode

Props: DropdownMenuContentProps

Example

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>
  );
}

One item of a DropdownMenu; with asChild a link becomes the item itself.

DropdownMenuItem(props: DropdownMenuItemProps): ReactNode

Props: DropdownMenuItemProps

Example

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

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

Sheet(props: SheetProps): ReactNode

Props: SheetProps

Example

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

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

SheetContent(props: SheetContentProps): ReactNode

Props: SheetContentProps

Example

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

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

SheetHeader

The top of a drawer, holding its title.

SheetHeader(props: SheetHeaderProps): ReactNode

Props: SheetHeaderProps

Example

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

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

SheetTitle

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

SheetTitle(props: SheetTitleProps): ReactNode

Props: SheetTitleProps

Example

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

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

Popover

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

Popover(props: PopoverProps): ReactNode

Props: PopoverProps

Example

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

The button that opens a Popover; it carries data-state="open" while the popover is open.

PopoverTrigger(props: PopoverTriggerProps): ReactNode

Props: PopoverTriggerProps

Example

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

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