https://github.com/kouts/vue-simple-dropdown

A Vue.js 3 simple dropdown menu component for floating-vue
https://github.com/kouts/vue-simple-dropdown

dropdown dropdown-menu dropdown-menus menu vue

Last synced: about 1 year ago
JSON representation

A Vue.js 3 simple dropdown menu component for floating-vue

• Host: GitHub
• URL: https://github.com/kouts/vue-simple-dropdown
• Owner: kouts
• License: mit
• Created: 2022-08-14T14:56:19.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-11-11T20:04:54.000Z (over 3 years ago)
• Last Synced: 2025-03-08T21:03:49.868Z (over 1 year ago)
• Topics: dropdown, dropdown-menu, dropdown-menus, menu, vue
• Language: Vue
• Homepage:
• Size: 530 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# vue-simple-dropdown  ![](https://img.badgesize.io/kouts/vue-simple-dropdown/main/dist/vue-simple-dropdown.umd.js.svg) ![](https://img.badgesize.io/kouts/vue-simple-dropdown/main/dist/vue-simple-dropdown.umd.js.svg?compression=gzip)

A Vue.js 3 simple dropdown menu component for [floating-vue](https://github.com/Akryum/floating-vue).

> vue-simple-dropdown is build on top of [floating-vue](https://github.com/Akryum/floating-vue) to provide 

> **keyboard navigation** for simple dropdown menus. 

## Features at a glance

- All [floating-vue Dropdown component](https://floating-vue.starpad.dev/guide/component.html#dropdown) features

- Completely headless, easily customizable using any CSS framework e.g Tailwind

- Keyboard navigation using the Up/Down arrows

- Customizable CSS selector for the menu items used for the keyboard navigation

- Opens and closes with the `space` and `enter` key when the dropdown trigger has focus

- Prevents page scroll while navigating the menu with the keyboard

- Closes by clicking outside or by using the `Esc` key

## Installation

```bash

npm i @kouts/vue-simple-dropdown

```

## Usage

```html

import SimpleDropdown from '@kouts/vue-simple-dropdown'

  

    

    

      Dropdown button

    

    

    

      


        


          

            Action (closes dropdown)

          

        

        


          Another action

        

      

    

  


```

## Styling

`vue-simple-dropdown` does not include any styling. You can use vanilla CSS or your favorite CSS framework to style it.  

By default it sets the `floating-vue` `Dropdown` theme to `simple-dropdown` and hides the dropdown `arrow`.  

The `Dropdown` arrow can be enabled by passing a different `theme` `prop`, e.g `theme="my-theme"`.

## Props

`vue-simple-dropdown` inherits **all** `props` from [floating-vue Dropdown](https://floating-vue.starpad.dev/api/#component-props)  

and sets some defaults:

- `distance: 14`

- `triggers: ['click']`

- `theme: "simple-dropdown"`

- `placement: "bottom-start"`

- `autoHide: true`

It also **adds** some `props` on top:

| Name | Type | Description | Default

| :--- | :--- | :--- | :--- |

| enableArrowNavigation | boolean | Enables/disables the arrow navigation feature | true |

| itemSelector | string | The dropdown item selector for the arrow navigation | `li > a:not(.disabled):not(:disabled)` |

## Slots

`vue-simple-dropdown` inherits **all** `slots` from [floating-vue Dropdown](https://floating-vue.starpad.dev/api/#component-slots)  

## Events

`vue-simple-dropdown` inherits **all** `events` from [floating-vue Dropdown](https://floating-vue.starpad.dev/api/#component-events)  

# Development

In order to start development:

```sh

npm i

npm run dev