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

Usage

Import

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

Example

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

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

Nested

When nesting, you may want to set the zIndex of the nested Popover.

<Dropdown>
  <Dropdown.Button label="Open Dropdown" />
  <Dropdown.Content>
    <Dropdown zIndex="1600">
      <Dropdown.Button m={5} label="nested" />
      <Dropdown.Content>
        <Text>Nested</Text>
      </Dropdown.Content>
    </Dropdown>
  </Dropdown.Content>
</Dropdown>
<Dropdown>
  <Dropdown.Button label="Open Dropdown" />
  <Dropdown.Content>
    <Dropdown zIndex="1600">
      <Dropdown.Button m={5} label="nested" />
      <Dropdown.Content>
        <Text>Nested</Text>
      </Dropdown.Content>
    </Dropdown>
  </Dropdown.Content>
</Dropdown>
content_copy
Copy
live example

Conn

Connected Dropdown

Connect multiple dropdown buttons using Connected component.

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

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

Controlled Dropdown

Control the open state of the dropdown manually.

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

Disabled Dropdown

Disable the dropdown to prevent user interaction.

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