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-dropdown-item">Purple</div>
		<div class="br-dropdown-item">Penguin</div>
		<div class="br-dropdown-item">Has</div>
		<div class="br-dropdown-item">Landed</div>
	</Popup>
</Dropdown>

Selected dropdown item

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

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

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

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-dropdown-item">Purple</div>
		<div class="br-dropdown-item">Penguin</div>
		<div class="br-dropdown-item">Has</div>
		<div class="br-dropdown-item">Landed</div>
	</Popup>
</Dropdown>