Dropdown

View Source

A compact way of displaying content or actionable items in a popover. Use Select for selectable options if needed.

Items

render(
  <Dropdown
    icon={{ name: 'general.cog' }}
    title="Folder settings"
    variant="outline"
  >
    <Dropdown.Item onSelect={() => console.log('edit folder')}>
      Edit Folder
    </Dropdown.Item>
    <Dropdown.Item onSelect={() => console.log('add folder')}>
      Add Folder
    </Dropdown.Item>
  </Dropdown>
)

render(
  <Dropdown
    icon={{ name: 'general.cog' }}
    title="Folder settings"
    variant="outline"
  >
    <Dropdown.Item onSelect={() => console.log('edit folder')}>
      Edit Folder
    </Dropdown.Item>
    <Dropdown.Item onSelect={() => console.log('add folder')}>
      Add Folder
    </Dropdown.Item>
  </Dropdown>
)

Links

render(
  <Dropdown title="Links" size="sm" variant="outline">
    <Dropdown.Link to="http://planning.center" external>
      Planning Center (external)
    </Dropdown.Link>
    <Dropdown.Link to="/button">Tapestry React Button</Dropdown.Link>
  </Dropdown>
)

render(
  <Dropdown title="Links" size="sm" variant="outline">
    <Dropdown.Link to="http://planning.center" external>
      Planning Center (external)
    </Dropdown.Link>
    <Dropdown.Link to="/button">Tapestry React Button</Dropdown.Link>
  </Dropdown>
)

render(
  <Dropdown
    title="Options"
    size="md"
    variant="outline"
    icon="general.threeDots"
    iconRight={undefined}
    tooltip={{ title: 'Options', placement: 'top' }}
  >
    <Dropdown.Item onSelect={() => console.log('Edit widget')}>
      Edit widget
    </Dropdown.Item>
    <Dropdown.Item onSelect={() => console.log('Delete widget')}>
      Delete widget
    </Dropdown.Item>
  </Dropdown>
)

render(
  <Dropdown
    title="Options"
    size="md"
    variant="outline"
    icon="general.threeDots"
    iconRight={undefined}
    tooltip={{ title: 'Options', placement: 'top' }}
  >
    <Dropdown.Item onSelect={() => console.log('Edit widget')}>
      Edit widget
    </Dropdown.Item>
    <Dropdown.Item onSelect={() => console.log('Delete widget')}>
      Delete widget
    </Dropdown.Item>
  </Dropdown>
)

Custom children

render(() => {
  const [previous, setPrevious] = React.useState(0)
  const [future, setFuture] = React.useState(4)
  return (
    <Group>
      <Button title="Matrix" size="xs" />
      <Dropdown aria-label="Matrix options" size="xs">
        <StackView width={28} padding={1} spacing={1}>
          <StackView
            as="label"
            axis="horizontal"
            alignment="center"
            distribution="space-between"
            spacing={1}
          >
            <Text>Past plans to load</Text>
            <NumberField
              size="xs"
              minWidth="49px"
              value={previous}
              min={0}
              onChange={(value) => setPrevious(value)}
            />
          </StackView>
          <StackView
            as="label"
            axis="horizontal"
            alignment="center"
            distribution="space-between"
            spacing={1}
          >
            <Text>Future plans to load</Text>
            <NumberField
              size="xs"
              minWidth="49px"
              value={future}
              min={0}
              onChange={(value) => setFuture(value)}
            />
          </StackView>
        </StackView>
      </Dropdown>
    </Group>
  )
})

render(() => {
  const [previous, setPrevious] = React.useState(0)
  const [future, setFuture] = React.useState(4)
  return (
    <Group>
      <Button title="Matrix" size="xs" />
      <Dropdown aria-label="Matrix options" size="xs">
        <StackView width={28} padding={1} spacing={1}>
          <StackView
            as="label"
            axis="horizontal"
            alignment="center"
            distribution="space-between"
            spacing={1}
          >
            <Text>Past plans to load</Text>
            <NumberField
              size="xs"
              minWidth="49px"
              value={previous}
              min={0}
              onChange={(value) => setPrevious(value)}
            />
          </StackView>
          <StackView
            as="label"
            axis="horizontal"
            alignment="center"
            distribution="space-between"
            spacing={1}
          >
            <Text>Future plans to load</Text>
            <NumberField
              size="xs"
              minWidth="49px"
              value={future}
              min={0}
              onChange={(value) => setFuture(value)}
            />
          </StackView>
        </StackView>
      </Dropdown>
    </Group>
  )
})

Fetch data on open

render(() => {
  const [loading, setLoading] = React.useState(false)
  return (
    <Dropdown
      title="Lazy Items"
      spinner={loading}
      onOpen={() => {
        setLoading(true)
        setTimeout(() => {
          setLoading(false)
        }, 2000)
      }}
      onSelect={(value) => console.log(`Item "${value}" selected`)}
    >
      {loading
        ? null
        : [1, 2, 3].map((value) => (
            <Dropdown.Item key={value} value={value}>
              Item {value}
            </Dropdown.Item>
          ))}
    </Dropdown>
  )
})

render(() => {
  const [loading, setLoading] = React.useState(false)
  return (
    <Dropdown
      title="Lazy Items"
      spinner={loading}
      onOpen={() => {
        setLoading(true)
        setTimeout(() => {
          setLoading(false)
        }, 2000)
      }}
      onSelect={(value) => console.log(`Item "${value}" selected`)}
    >
      {loading
        ? null
        : [1, 2, 3].map((value) => (
            <Dropdown.Item key={value} value={value}>
              Item {value}
            </Dropdown.Item>
          ))}
    </Dropdown>
  )
})

No arrow and text truncation

render(
  <StackView width={16}>
    <Dropdown
      iconRight={undefined}
      title={<Text truncate>Supercalifragilisticexpialidocious</Text>}
      variant="outline"
    >
      <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
      <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
      <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
    </Dropdown>
  </StackView>
)

render(
  <StackView width={16}>
    <Dropdown
      iconRight={undefined}
      title={<Text truncate>Supercalifragilisticexpialidocious</Text>}
      variant="outline"
    >
      <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
      <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
      <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
    </Dropdown>
  </StackView>
)

Custom Trigger

Guitar

function GuitarIcon({ fill }) {
  return (
    <svg width="28" height="28" fill="none" viewBox="0 0 28 28">
      <path
        fill={fill}
        fillRule="evenodd"
        d="M27.349 2.657L24.887.237c-.32-.32-.88-.319-1.183.023l-3.38 3.46a1.607 1.607 0 00-.423.863l-.123.722c-.041.321-.182.622-.424.863l-5.072 5.37-.04.046c-2.081-1.322-4.576-1.324-6.055.155l-.127.127c-1.356 1.358-3.226 3.23-4.953 3.951-.68.285-1.312.7-1.858 1.246-2.443 2.443-.991 5.328 1.684 8.004 2.675 2.675 5.56 4.127 8.004 1.684a5.764 5.764 0 001.246-1.859c.721-1.726 2.592-3.596 3.95-4.952l.127-.127c1.479-1.479 1.478-3.972.157-6.052.037-.033.073-.067.108-.104l5.051-5.347c.241-.242.523-.403.844-.444l.722-.123c.32-.041.622-.222.843-.444l3.38-3.46a.83.83 0 00-.016-1.182zM8.584 19.415a2.284 2.284 0 103.23-3.23 2.284 2.284 0 00-3.23 3.23z"
      />
    </svg>
  )
}
const colors = [
  '#714dd8',
  '#3c8bf7',
  '#72bb52',
  '#ff6767',
  '#ffa833',
  '#000000',
]
render(() => {
  const [activeColor, setActiveColor] = React.useState('#000000')
  return (
    <Dropdown
      triggerElement={
        <StackView
          width={10}
          height={10}
          alignment="center"
          distribution="center"
          stroke={activeColor === '#000000' ? 'separator' : activeColor}
          strokeWeight={2}
          spacing={1}
          radius={5}
        >
          <GuitarIcon fill={activeColor} />
          <Text size={4} weight={600} letterSpacing="0.05em">
            Guitar
          </Text>
        </StackView>
      }
      title="Drums"
      popoverProps={{
        paddingHorizontal: 1,
        paddingVertical: 1,
      }}
    >
      <GridView columns="1fr 1fr 1fr" spacing={1}>
        {colors.map((color, index) => (
          <Dropdown.Item
            key={color}
            index={index}
            width={4}
            height={4}
            backgroundColor={color}
            highlightedColor={color + 'd1'}
            stroke={color === activeColor ? color + '75' : undefined}
            strokeWeight={2}
            onSelect={() => setActiveColor(color)}
          />
        ))}
      </GridView>
    </Dropdown>
  )
})

function GuitarIcon({ fill }) {
  return (
    <svg width="28" height="28" fill="none" viewBox="0 0 28 28">
      <path
        fill={fill}
        fillRule="evenodd"
        d="M27.349 2.657L24.887.237c-.32-.32-.88-.319-1.183.023l-3.38 3.46a1.607 1.607 0 00-.423.863l-.123.722c-.041.321-.182.622-.424.863l-5.072 5.37-.04.046c-2.081-1.322-4.576-1.324-6.055.155l-.127.127c-1.356 1.358-3.226 3.23-4.953 3.951-.68.285-1.312.7-1.858 1.246-2.443 2.443-.991 5.328 1.684 8.004 2.675 2.675 5.56 4.127 8.004 1.684a5.764 5.764 0 001.246-1.859c.721-1.726 2.592-3.596 3.95-4.952l.127-.127c1.479-1.479 1.478-3.972.157-6.052.037-.033.073-.067.108-.104l5.051-5.347c.241-.242.523-.403.844-.444l.722-.123c.32-.041.622-.222.843-.444l3.38-3.46a.83.83 0 00-.016-1.182zM8.584 19.415a2.284 2.284 0 103.23-3.23 2.284 2.284 0 00-3.23 3.23z"
      />
    </svg>
  )
}
const colors = [
  '#714dd8',
  '#3c8bf7',
  '#72bb52',
  '#ff6767',
  '#ffa833',
  '#000000',
]
render(() => {
  const [activeColor, setActiveColor] = React.useState('#000000')
  return (
    <Dropdown
      triggerElement={
        <StackView
          width={10}
          height={10}
          alignment="center"
          distribution="center"
          stroke={activeColor === '#000000' ? 'separator' : activeColor}
          strokeWeight={2}
          spacing={1}
          radius={5}
        >
          <GuitarIcon fill={activeColor} />
          <Text size={4} weight={600} letterSpacing="0.05em">
            Guitar
          </Text>
        </StackView>
      }
      title="Drums"
      popoverProps={{
        paddingHorizontal: 1,
        paddingVertical: 1,
      }}
    >
      <GridView columns="1fr 1fr 1fr" spacing={1}>
        {colors.map((color, index) => (
          <Dropdown.Item
            key={color}
            index={index}
            width={4}
            height={4}
            backgroundColor={color}
            highlightedColor={color + 'd1'}
            stroke={color === activeColor ? color + '75' : undefined}
            strokeWeight={2}
            onSelect={() => setActiveColor(color)}
          />
        ))}
      </GridView>
    </Dropdown>
  )
})

Tapestry DropdownButton as Trigger

render(() => {
  return (
    <GridView columns="auto auto auto" spacing={1}>
      {/* DropdownIconButton */}
      <Dropdown
        triggerElement={
          <DropdownIconButton
            icon="🥓"
            aria-label="Print"
            aria-controls='dropdown-icon-button-popover'
            aria-expanded={false}
          />
        }
        triggerElementIsTapestryReact={false}
        popoverProps={{ id: 'dropdown-icon-button-popover' }} // required
      >
        <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
        <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
        <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
      </Dropdown>

      {/* DropdownButton */}
      <Dropdown
        triggerElement={
          <DropdownButton
            label="Actions"
            prefix="🚀"
            kind="primary"
            aria-controls='dropdown-button-popover'
            aria-expanded={false}
          />
        }
        triggerElementIsTapestryReact={false}
        popoverProps={{ id: 'dropdown-button-popover' }} // required
      >
        <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
        <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
        <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
      </Dropdown>

      {/* PageHeaderActionsDropdownButton */}
      <Dropdown
        triggerElement={
          <PageHeaderActionsDropdownButton
            label="Actions"
            needsAttention
            aria-controls='page-header-actions-dropdown-button-popover'
            aria-expanded={false}
          />
        }
        triggerElementIsTapestryReact={false}
        popoverProps={{ id: 'page-header-actions-dropdown-button-popover' }} // required
      >
        <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
        <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
        <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
      </Dropdown>
    </GridView>
  )
})

render(() => {
  return (
    <GridView columns="auto auto auto" spacing={1}>
      {/* DropdownIconButton */}
      <Dropdown
        triggerElement={
          <DropdownIconButton
            icon="🥓"
            aria-label="Print"
            aria-controls='dropdown-icon-button-popover'
            aria-expanded={false}
          />
        }
        triggerElementIsTapestryReact={false}
        popoverProps={{ id: 'dropdown-icon-button-popover' }} // required
      >
        <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
        <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
        <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
      </Dropdown>
      {/* DropdownButton */}
      <Dropdown
        triggerElement={
          <DropdownButton
            label="Actions"
            prefix="🚀"
            kind="primary"
            aria-controls='dropdown-button-popover'
            aria-expanded={false}
          />
        }
        triggerElementIsTapestryReact={false}
        popoverProps={{ id: 'dropdown-button-popover' }} // required
      >
        <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
        <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
        <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
      </Dropdown>
      {/* PageHeaderActionsDropdownButton */}
      <Dropdown
        triggerElement={
          <PageHeaderActionsDropdownButton
            label="Actions"
            needsAttention
            aria-controls='page-header-actions-dropdown-button-popover'
            aria-expanded={false}
          />
        }
        triggerElementIsTapestryReact={false}
        popoverProps={{ id: 'page-header-actions-dropdown-button-popover' }} // required
      >
        <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
        <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
        <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
      </Dropdown>
    </GridView>
  )
})

Props

Accepts Button and Popover props.

asnever

closeOnSelectboolean

Closes Popover upon selecting a Dropdown.Item.

defaultOpenboolean

Externally control Popover open state on initial render.

fontSizeStyleProps['fontSize']

fontWeightStyleProps['fontWeight']

forceOpenboolean

Forces Popover open for testing purposes.

iconLeftstring | ComponentProps

iconRightButtonProps['iconRight'] | null

innerRefany

Gain access to the internal ref.

keepInViewboolean

Attempts to keep popover in view clipping edges if too large.

lockScrollWhileOpenboolean

Locks external scrollbars when open.

matchWidthsboolean | 'minimum'

Matches anchor and popover widths.

onClickMouseEventHandler

onClose() => void

Callback when Popover is closed.

onKeyDownKeyboardEventHandler

onOpen() => void

Callback when Popover is opened.

onSearch(event: KeyboardEvent) => void

Overrides the default search function for selecting a dropdown item via keyboard.

onSelect(data: any) => void

paddingLeftStyleProps['paddingLeft']

paddingVerticalStyleProps['paddingVertical']

placementPlacement

Where to place the popover.

popoverPropsobject

Accepts any valid Popover props.

renderToHTMLElement | string

Where to render the popover into. Accepts an HTML element or selector. Uses the closest fixed parent or document.body by default. This will only be computed once on initial render.

spinnerboolean

titleJSX.Element | string

triggerElementReactReactElement | ReactElementType | string | ReactComponentClass | ReactFunctionComponent

Allows specifying a type or custom element that will be cloned and provided Dropdown trigger props. (Defaults to a Button.)

triggerElementIsTapestryReactboolean

variantstring

Items
Links
With Tooltip
Custom children
Fetch data on open
No arrow and text truncation
Custom Trigger
Tapestry DropdownButton as Trigger
Props

PreviousDrawer NextEditActions