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>

Trigger

<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>

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"`