Provide an enhanced and flexible dropdown experience with DropdownV2. It allows users to display content dynamically and interactively with a combination of triggers, and menu items.

Usage

Import

import { DropdownV2 } from '@passfort/castle'
content_copy
Copy

Example

Organize dropdown components using DropdownV2.Button and DropdownV2.Content, for a clear and consistent experience.

<DropdownV2>
  <DropdownV2.Button label="Open Dropdown" />
  <DropdownV2.Content>
    <Text>Dropdown Content</Text>
  </DropdownV2.Content>
</DropdownV2>
<DropdownV2>
  <DropdownV2.Button label="Open Dropdown" />
  <DropdownV2.Content>
    <Text>Dropdown Content</Text>
  </DropdownV2.Content>
</DropdownV2>
content_copy
Copy
live example

Connected Dropdown

Connect multiple dropdown buttons using Connected component.

import { Connected } from '@passfort/castle'
content_copy
Copy

<Connected group="dropdown">
  <DropdownV2>
    <DropdownV2.Button group="dropdown" label="Toggle Dropdown 1" />
    <DropdownV2.Content>
      <Text>Controlled Content 1</Text>
    </DropdownV2.Content>
  </DropdownV2>
  <DropdownV2>
    <DropdownV2.Button group="dropdown" label="Toggle Dropdown 2" />
    <DropdownV2.Content>
      <Text>Controlled Content 2</Text>
    </DropdownV2.Content>
  </DropdownV2>
</Connected>
<Connected group="dropdown">
  <DropdownV2>
    <DropdownV2.Button group="dropdown" label="Toggle Dropdown 1" />
    <DropdownV2.Content>
      <Text>Controlled Content 1</Text>
    </DropdownV2.Content>
  </DropdownV2>
  <DropdownV2>
    <DropdownV2.Button group="dropdown" label="Toggle Dropdown 2" />
    <DropdownV2.Content>
      <Text>Controlled Content 2</Text>
    </DropdownV2.Content>
  </DropdownV2>
</Connected>
content_copy
Copy
live example

Controlled Dropdown

Control the open state of the dropdown manually.

function ControlledDropdown() {
  const { isOpen, onClose, onOpen } = useDisclosure()
  return (
    <DropdownV2 isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
      <DropdownV2.Button label="Toggle Controlled Dropdown" />
      <DropdownV2.Content>
        <Text>Controlled Content</Text>
      </DropdownV2.Content>
    </DropdownV2>
  )
}
function ControlledDropdown() {
  const { isOpen, onClose, onOpen } = useDisclosure()
  return (
    <DropdownV2 isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
      <DropdownV2.Button label="Toggle Controlled Dropdown" />
      <DropdownV2.Content>
        <Text>Controlled Content</Text>
      </DropdownV2.Content>
    </DropdownV2>
  )
}
content_copy
Copy
live example

Disabled Dropdown

Disable the dropdown to prevent user interaction.

<DropdownV2 isDisabled>
  <DropdownV2.Button
    label="Disabled"
    tooltip={`You can't interact with this dropdown.`}
  />
  <DropdownV2.Content>
    <Text>Disabled Dropdown Content</Text>
  </DropdownV2.Content>
</DropdownV2>
<DropdownV2 isDisabled>
  <DropdownV2.Button
    label="Disabled"
    tooltip={`You can't interact with this dropdown.`}
  />
  <DropdownV2.Content>
    <Text>Disabled Dropdown Content</Text>
  </DropdownV2.Content>
</DropdownV2>
content_copy
Copy
live example