Dropdown
Page Header Specific Dropdown
Default
The dropdown component includes a reference (<Dropdown>) and floating (<Dropdown.Content>).
When opened, not only the float will appear but depending on the trigger a specific section is visible.
It creates a focus trap around the content, allowing closure only by clicking outside or pressing the escape key.
Element wrapped by reference
<Dropdown>
<Block class="min-h-40" caption="Element wrapped by reference">
<Dropdown.Trigger>No Section</Dropdown.Trigger>
<Dropdown.Trigger section="a">Section a</Dropdown.Trigger>
<Dropdown.Trigger section="b">Section b</Dropdown.Trigger>
<Dropdown.Content>
<Dropdown.Section section="a">
<div class="bg-orange-100 min-h-20">
[content section a]
</div>
</Dropdown.Section>
<Dropdown.Section section="b">
<div class="bg-purple-100 min-h-20">
<Dropdown.Trigger section="d">Section d</Dropdown.Trigger>
<br>
[content section b]
</div>
</Dropdown.Section>
<Dropdown.Section section="c">
<div class="bg-green-100 min-h-20">
[content section c]
</div>
</Dropdown.Section>
<Dropdown.Section section="d">
<div class="bg-red-100 min-h-20">
[content section d]
</div>
</Dropdown.Section>
<div class=" min-h-20">
<Dropdown.Trigger section="c">Section c</Dropdown.Trigger>
<br>
[content no section]
</div>
</Dropdown.Content>
</Block>
</Dropdown>Default Section
A default section can be set by setting the defaultSection attribute on <Dropdown.Content>
Element wrapped by reference
<Dropdown>
<Block class="min-h-20" caption="Element wrapped by reference">
<Dropdown.Trigger>No Section</Dropdown.Trigger>
<Dropdown.Trigger section="a">Section a</Dropdown.Trigger>
<Dropdown.Content defaultSection="a">
<Dropdown.Section section="a">
<div>[content section a]</div>
</Dropdown.Section>
<div>
[content no section]
</div>
</Dropdown.Content>
</Block>
</Dropdown>