Maz-UI

Appearance

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>

Open dropdown only on click ​

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>

Open dropdown only on hover ​

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>

Custom dropdown icon ​

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>

Custom dropdown main button without chevron icon ​

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 ​

Custom dropdown panel ​

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 ​

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

Made by LouisMazel with ❤️