Documentation | Velvet Thunder

Uses Floating UI underneath.

Placement

<DemoSpaceX>
  <VelvetDropdown @placement="bottom-start" as |dropdown|>
    <dropdown.Button>
      Bottom Start
    </dropdown.Button>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>

  <VelvetDropdown @placement="bottom-end" as |dropdown|>
    <dropdown.Button>
      Bottom End
    </dropdown.Button>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>
</DemoSpaceX>

Offset

<DemoSpaceX>
  <VelvetDropdown @offset={{4}} as |dropdown|>
    <dropdown.Button>
      4 Pixels Offset
    </dropdown.Button>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>

  <VelvetDropdown @offset={{8}} as |dropdown|>
    <dropdown.Button>
      8 Pixels Offset
    </dropdown.Button>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>

  <VelvetDropdown @offset={{12}} as |dropdown|>
    <dropdown.Button>
      12 Pixels Offset
    </dropdown.Button>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>
</DemoSpaceX>

Triggers

<DemoSpaceX>
  <VelvetDropdown as |dropdown|>
    <dropdown.Button>
      Menu
    </dropdown.Button>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>

  <VelvetDropdown as |dropdown|>
    <dropdown.IconButton>
      <DemoMenuIcon />
    </dropdown.IconButton>
    <dropdown.Content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </dropdown.Content>
  </VelvetDropdown>
</DemoSpaceX>

Custom Trigger and Content

<DemoSpaceX>
  <VelvetDropdown as |dropdown|>
    <VelvetAvatar @name="Jake Peralta" role="button" {{dropdown.trigger}} />
    {{#if dropdown.isShown}}
      <img
        class="rounded-md w-52"
        src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5b9d1b46230007.584c7bdd776b5.jpg"
        {{dropdown.content}}
      />
    {{/if}}
  </VelvetDropdown>
</DemoSpaceX>

Signature

Element

HTMLElement

Blocks

Name	Description	Type
`:default` *	The trigger and the content of the dropdown.	`[{ Button: WithBoundArgs<typeof VelvetButton, "privateDropdownTrigger" \| "isDisclosure" \| "variant">; Content: WithBoundArgs<typeof VelvetDropdownContent, "isShown" \| "modifier">; IconButton: WithBoundArgs<typeof VelvetIconButton, "privateDropdownTrigger" \| "variant">; isShown: boolean; hide: () => void; show: () => void; toggle: () => void; content: ModifierLike<ContentSignature>; trigger: ModifierLike<TriggerSignature>; }]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@offset`	Offset of the content in pixels relative to the trigger.	`number`	`4`
`@placement`	Placement of the content relative to the trigger.	`Placement`	`"bottom-start"`
`@strategy`	CSS position of the content.	`Strategy`	`"absolute"`

Arguments marked with * are required.