Dropdown

Dropdown displays a list of actions or options to a user.

Examples

Basic usage

<script>
    import { Dropdown, Popup } from '@kwangure/strawberry/default/dropdown';
</script>

<Dropdown>
	<button slot="trigger">
		Click for dropdown
	</button>
	<Popup>
		<div class="br-focusable">Purple</div>
		<div class="br-focusable">Penguin</div>
		<div class="br-focusable">Has</div>
		<div class="br-focusable">Landed</div>
	</Popup>
</Dropdown>

Purple

Penguin

Has

Landed

Selected item

To indicate that an item in the dropdown is true, you may add the aria-selected attribute to the item.

<script>
    import { Dropdown, Popup } from '@kwangure/strawberry/default/dropdown';
</script>

<Dropdown>
	<button slot="trigger">
		Click for dropdown
	</button>
	<Popup>
		<div class="br-focusable">Unselected</div>
		<div class="br-focusable" aria-selected="true">
			Selected
		</div>
		<div class="br-focusable">Unselected</div>
	</Popup>
</Dropdown>

Unselected

Selected

Unselected

Popup arrows

You may optionally add an <Arrow/> to the popup to indicate the selected trigger

<script>
    import { Arrow, Dropdown, Popup } from '@kwangure/strawberry/default/dropdown';
</script>

<Dropdown>
	<button slot="trigger">
		Click for dropdown
	</button>
	<Popup>
		<Arrow/>
		<div class="br-focusable">Purple</div>
		<div class="br-focusable">Penguin</div>
		<div class="br-focusable">Has</div>
		<div class="br-focusable">Landed</div>
	</Popup>
</Dropdown>

Purple

Penguin

Has

Landed