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