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' },
      { label: 'Router Link', to: { name: 'index' } },
    ]"
  >
    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>

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		TSIndexedAccessType	-	undefined
class		TSIndexedAccessType	-	undefined
items	Menu items	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'

Events

Event name	Properties	Description
menuitem-clicked		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
element	Custom Element	is-open `Boolen` - close function
default	Button text
dropdown	Custom dropdown panel	items `Array` - items prop data
menuitem	Custom menu item	item `Object` - menu item
menuitem-label

MazDropdown ​

Basic usage ​

Open dropdown only on click ​

Open dropdown only on hover ​

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