MazDropdown

MazDropdown is a standalone dropdown menu component and versatile designed for various use cases.

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

vue

<template>
  <MazDropdown
    :items="[
      { label: 'Action', action: () => toast.success('CLICKED') },
      { label: 'Link (href)', href: 'https://www.google.com', target: '_blank', color: 'secondary' },
      { label: 'Router Link', to: { name: 'index' }, color: 'danger' },
    ]"
  >
    Dropdown Menu
  </MazDropdown>
</template>

<script lang="ts" setup>
  import MazDropdown from 'maz-ui/components/MazDropdown'
</script>

html

<MazDropdown
  :items="[
    { label: 'Action', action: () => toast.success('CLICKED') },
    { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
    { label: 'Router Link', to: { name: 'index' } },
  ]"
  trigger="click"
>
  Click me
</MazDropdown>

html

<MazDropdown
  :items="[
    { label: 'Action', action: () => toast.success('CLICKED') },
    { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
    { label: 'Router Link', to: { name: 'index' } },
  ]"
  trigger="hover"
>
  Hover me
</MazDropdown>

You can provide an icon to replace the default chevron icon and disable the animation

vue

<script lang="ts" setup>
  // Use vite-svg-loader to import SVG as Vue component
  import ChevronUpDownIcon from 'maz-ui/icons/chevron-up-down.svg?component'
</script>

<template>
  <MazDropdown
    :items="[
      { label: 'Action', action: () => toast.success('CLICKED') },
      { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
      { label: 'Router Link', to: { name: 'index' } },
    ]"
    trigger="hover"
    :dropdown-icon="ChevronUpDownIcon"
  >
    Hover me
  </MazDropdown>

  <MazDropdown
    :items="[
      { label: 'Action', action: () => toast.success('CLICKED') },
      { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
      { label: 'Router Link', to: { name: 'index' } },
    ]"
    trigger="hover"
    :dropdown-icon="ChevronUpDownIcon"
    :dropdown-icon-animation="false"
  >
    No icon animation
  </MazDropdown>
</template>

TIP

This component uses MazBtn has a menu button, so it inherits all its props

html

<MazDropdown
  color="primary"
  fab
  pastel
  no-chevron
  icon="bars-3"
  size="xl"
  :items="[
    { label: 'Action', action: () => toast.success('CLICKED') },
    { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
    { label: 'Router Link', to: { name: 'index' } },
  ]"
  no-close-on-click
/>

Custom slots

You can provide a template to replace the default dropdown panel

View code

html

<MazDropdown>
  Customized dropdown panel

  <template #dropdown>
    <div class="maz-grid maz-grid-cols-3 maz-gap-2">
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
      <MazBtn color="transparent"> Item </MazBtn>
    </div>
  </template>
</MazDropdown>

Custom menuitem labels

You can provide a template to replace menuitem labels to add more elements in each menuitem

View code

html

<MazDropdown
  :items="[
    { label: 'Action', action: () => toast.success('CLICKED'), additionnalData: 'https://loremflickr.com/240/200' },
    { label: 'Link (href)', href: 'https://www.google.com', target: '_blank', additionnalData: 'https://loremflickr.com/340/300' },
    { label: 'Router Link', to: { name: 'index' }, additionnalData: 'https://loremflickr.com/440/400' },
  ]"
>
  <template #default>
    Customized labels
  </template>

  <template #menuitem-label="{ item }">
    <div class="maz-flex maz-items-center maz-gap-2">
      <MazAvatar :src="item.additionnalData" />
      <span>
        {{ item.label }}
      </span>
    </div>
  </template>
</MazDropdown>

Custom control element

You can provide an HTML element or a component to replace the default button

WARNING

Add tabindex="-1" attribute to your element to avoid a double focus with Tab key

View code

html

<MazDropdown
  :items="[
    {
      label: 'Action',
      action: () => toast.success('CLICKED'),
      additionnalData: 'https://loremflickr.com/240/200',
    },
    {
      label: 'Link (href)',
      href: 'https://www.google.com',
      target: '_blank',
      additionnalData: 'https://loremflickr.com/340/300',
    },
    {
      label: 'Router Link',
      to: { name: 'index' },
      additionnalData: 'https://loremflickr.com/440/400',
    },
  ]"
>
  <template #element>
    <MazAvatar
      clickable
      no-clickable-icon
      src="https://cdn.artphotolimited.com/images/5ff5a529bd40b83c5a537440/1000x1000/gerard-depardieu-1983.jpg"
      tabindex="-1"
    />
  </template>
</MazDropdown>

<MazDropdown
  position="top"
  :items="[
    {
      label: 'Action',
      action: () => toast.success('CLICKED'),
      additionnalData: 'https://loremflickr.com/240/200',
    },
    {
      label: 'Link (href)',
      href: 'https://www.google.com',
      target: '_blank',
      additionnalData: 'https://loremflickr.com/340/300',
    },
    {
      label: 'Router Link',
      to: { name: 'index' },
      additionnalData: 'https://loremflickr.com/440/400',
    },
  ]"
>
  <template #element="{ isOpen }">
    <button class="maz-border maz-border-solid maz-border-color-light maz-p-2 hover:maz-bg-color-light" tabindex="-1">
      HTMLButtonElement: isOpen {{ isOpen }}
    </button>
  </template>
</MazDropdown>

Open programmatically

isOpen: false

vue

<template>
  <MazDropdown
    v-model:open="isOpen"
    :items="[
      { label: 'Action', action: () => toast.success('CLICKED') },
      { label: 'Link (href)', href: 'https://www.google.com', target: '_blank' },
      { label: 'Router Link', to: { name: 'index' } },
    ]"
  >
    Open
  </MazDropdown>

  <MazBtn @click="isOpen = !isOpen">
    Open Dropdown
  </MazBtn>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const isOpen = ref(false)
</script>

Position

Types

MenuItem

type MenuItem = {
  label: string
  action?: () => unknown
  target?: string
  href?: string
  to?: RouteLocationRaw
  class?: string
} & Record<string, unknown>

Props, Event & Slots

Props

Prop name	Description	Type	Values	Default
style	Style object	TSIndexedAccessType	-	undefined
class	Class name	TSIndexedAccessType	-	undefined
items	Menu items `@default` '[]'	Array	-	() => []
open	Menu should be open?	boolean	-
id	id of the menu	string	-	undefined
trigger	Should open the dropdown on click, hover or both `@default` 'both'	union	-	'both'
color	Button color `@default` 'transparent'	Color	-	'transparent'
position	Position of the dropdown `@default` 'bottom left'	Position	-	'bottom left'
noCloseOnClick	Disable close menu on menuitem clicked	boolean	-
disabled	Disable menu	boolean	-
noChevron	Remove chevron icon in main button	boolean	-
screenReaderDescription	Description read by screen reader (accessibility) `@default` 'Open menu dropdown'	string	-	'Open menu dropdown'
menuPanelClass	Class for the menu panel - useful for custom dropdown panel (background, border, etc.)	TSIndexedAccessType	-
menuPanelStyle	Style for the menu panel - useful for custom dropdown panel (background, border, etc.) You may use `!important` to override the default style	TSIndexedAccessType	-
block	If true, the button will have a full width	boolean	-
dropdownIcon	Custom dropdown icon You can use a string to define the icon name or a Vue component `@default` undefined	union	-
dropdownIconAnimation	If true, the dropdown icon will rotate when the dropdown is open `@default` true	boolean	-	true
size	Size of the button `@default` 'md'	Size	-	'md'

Events

Event name	Properties	Description
menuitem-clicked	event `Event` - the click event	emitted when a menu item is clicked
update:open	open `boolean` - new value	Triggers when the number changes

Slots

Name	Description	Bindings
screen-reader-description	Description for screen reader (hidden)
element	Custom Element	is-open `Boolen` - dropdown open state
default
dropdown-icon	Custom dropdown icon	is-open `Boolean` - dropdown open state
dropdown	Custom dropdown panel	items `Array` - items prop data
menuitem	Custom menu item	item `MenuItem` - menu item
menuitem-label	Custom label for menu item

MazDropdown ​

Basic usage ​

Open dropdown only on click ​

Open dropdown only on hover ​

Custom dropdown icon ​

Custom dropdown main button without chevron icon ​

Custom slots ​

Custom dropdown panel ​

Custom menuitem labels ​

Custom control element ​

Open programmatically ​

Position ​

Types ​

MenuItem ​

Props, Event & Slots ​

Props ​

Events ​

Slots ​

MazDropdown

Basic usage

Open dropdown only on click

Open dropdown only on hover

Custom dropdown icon

Custom dropdown main button without chevron icon

Custom slots

Custom dropdown panel

Custom menuitem labels

Custom control element

Open programmatically

Position

Types

MenuItem

Props, Event & Slots

Props

Events

Slots