Dropdown Menu

The dropdown-menu component displays a list of actionable or informational items, similar to traditional dropdown lists. It supports headers, dividers, links, and plain text items.

Installation

pnpm

pnpm i @vue-interface/dropdown-menu

yarn

yarn add @vue-interface/dropdown-menu

npm

npm i @vue-interface/dropdown-menu

bun

bun i @vue-interface/dropdown-menu

Basic Usage

Nothing was clicked!

Vue Router

Links

Item #2Item #3

Plain Text

---

Item #4

Heading Element

italic text

bold text

strong text

_{subscripted text}

^{superscripted text}

small text

deleted text

inserted text

quoted text

short quoted text

cited text

address

inserted text

code snippet

marked text

Unstyled text

<div class="dropdown-menu show relative z-1">
    <h3 class="dropdown-header">Vue Router</h3>
    <h3 class="dropdown-header">Links</h3>
    <a href="#" class="dropdown-item active">Item #2</a>
    <a href="#" class="dropdown-item">Item #3</a>
    <div class="dropdown-item-text">Plain Text</div>
    <hr class="dropdown-divider" />
    <a href="#" class="dropdown-item">Item #4</a>
    <h3 class="dropdown-header">Heading Element</h3>
    <div class="dropdown-item"><i>italic text</i></div>
    <div class="dropdown-item"><b>bold text</b></div>
    <div class="dropdown-item"><em>strong text</em></div>
    <div class="dropdown-item"><sub>subscripted text</sub></div><br>
    <div class="dropdown-item"><sup>superscripted text</sup></div>
    <div class="dropdown-item"><small>small text</small></div>
    <div class="dropdown-item"><del>deleted text</del></div>
    <div class="dropdown-item"><ins>inserted text</ins></div>
    <div class="dropdown-item"><blockquote>quoted text</blockquote></div>
    <div class="dropdown-item"><q>short quoted text</q></div>
    <div class="dropdown-item"><cite>cited text</cite></div>
    <div class="dropdown-item"><address>address</address></div>
    <div class="dropdown-item"><abbr title="inserted text">inserted text</abbr></div>
    <div class="dropdown-item"><code>code snippet</code></div>
    <div class="dropdown-item"><mark>marked text</mark></div>
    <div class="dropdown-item-plain">Unstyled text</div>
</div>