DropDownMenu

The DropDownMenu component provides a way to toggle contextual overlays for displaying lists of links.

Composable Components

The DropDownMenu is made up of several components that allow you to compose different types of drop down menus.

Component	Description
DropDownMenuRoot	The root component element
DropDownMenuTrigger	The element that triggers the menu to show/hide
DropDownMenu	The element that contains the menu items
DropDownMenuItem	The individual menu item element

Examples

Simple Example

<DropDownMenuRoot>
    <DropDownMenuTrigger>
        Actions
    </DropDownMenuTrigger>
    <DropDownMenu>
        <DropDownMenuItem href="/some-link" id="id-1">some action</DropDownMenuItem>
        <DropDownMenuItem href="/another-link" id="id-2">another action</DropDownMenuItem>
    </DropDownMenu>
</DropDownMenuRoot>

More Advanced

<DropDownMenuRoot class="z-10" v-if="isAuthenticated">
    <DropDownMenuTrigger
        @drop-down-menu-trigger:click="handleMenuClick(!isAuthenticated ? 'login' : null)"
    >
        <i class="fa-solid fa-circle-user text-xl"></i>
        <span v-if="isAuthenticated" class="mx-2">
            {{ user.first_name }}
            {{ user.last_name }}
        </span>
        <i class="fa-solid fa-chevron-down" v-if="isAuthenticated"></i>
        <span v-if="!isAuthenticated" class="ml-2 inline-block"> Sign in </span>
    </DropDownMenuTrigger>
    <DropDownMenu v-if="isAuthenticated" class="top-8 right-2">
        <DropDownMenuItem id="account" @drop-down-menu-item:click="handleMenuClick($event)">
        <i class="fa-solid fa-user mr-2"></i> Account
        </DropDownMenuItem>
        <DropDownMenuItem id="logout" @drop-down-menu-item:click="handleMenuClick($event)">
        <i class="fa-solid fa-arrow-right-from-bracket mr-2"></i> Sign-out
        </DropDownMenuItem>
    </DropDownMenu>
</DropDownMenuRoot>

A working example of this can be in /frontend/components/header/Header.vue.

DropDownMenuRoot

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.drop-down-menu-root	the class applied to the DropDownMenuRoot element

DropDownMenuTrigger

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
drop-down-menu-trigger:click	emitted when the trigger button is clicked

CSS Classes

Class	Description
--

DropDownMenu

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
--

DropDownItem

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
drop-down-menu-item:click	emits when the menu item is clicked.	if prop.href is # then the prop.id is passed as an arg to the event handler.

CSS Classes

Class	Description
--