Skip to content

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.

ComponentDescription
DropDownMenuRootThe root component element
DropDownMenuTriggerThe element that triggers the menu to show/hide
DropDownMenuThe element that contains the menu items
DropDownMenuItemThe individual menu item element

Examples

Simple Example

html
<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

html
<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.

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.drop-down-menu-rootthe class applied to the DropDownMenuRoot element

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
drop-down-menu-trigger:clickemitted when the trigger button is clicked

CSS Classes

ClassDescription
--

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
--

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
drop-down-menu-item:clickemits 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

ClassDescription
--