Dropdown

The dropdown component is a simple wrapper around a button and a list of items. It is used to create a dropdown menu, that can be opened and closed by clicking on the button or clicking outside the dropdown.

Usage

<script setup lang="ts">
import { Dropdown, DropdownItem, DropdownDivider } from "@froeschke/ui";
</script>

<template>
  <Dropdown title="Dropdown" direction="left">
    <DropdownItem href="/item-1">Item 1</DropdownItem>
    <DropdownItem href="/item-2">Item 2</DropdownItem>
    <DropdownDivider />
    <DropdownItem href="/item-3">Item 3</DropdownItem>
  </Dropdown>
</template>

Props

Dropdown Props

Name	Type	Default	Description
title	String	-	The title of the dropdown button
direction	String: left or right	right	The direction in which the dropdown should open

DropdownItem Props

Name	Type	Default	Description
to	Object or String	-	The route to navigate to (Vue Router)
href	String	-	The URL to navigate to
target	String	_self	The target of the link

Events

Dropdown Events

Name	Description
click-outside	Emitted when the dropdown is closed