DocsComposantsDropdown menu

Dropdown menu

A menu opened by a trigger.

Alpine.jsdépend de button4 fichiers

<pb-ui.dropdown-menu>
  <pb-slot:trigger><pb-ui.button variant="outline">Ouvrir</pb-ui.button></pb-slot:trigger>
  <pb-ui.dropdown-menu-label>Mon compte</pb-ui.dropdown-menu-label>
  <pb-ui.dropdown-menu-separator />
  <pb-ui.dropdown-menu-item href="#">Profil</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item href="#">Facturation</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item href="#">Paramètres</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-separator />
  <pb-ui.dropdown-menu-item variant="destructive">Se déconnecter</pb-ui.dropdown-menu-item>
</pb-ui.dropdown-menu>

Installation

pyblade-ui add dropdown-menu

Installez les dépendances
button et Alpine.js, chargé dans votre <head>.

Copiez ces fichiers dans votre projet

components/ui/dropdown_menu.html

@props({'trigger': '', 'align': 'start'})
<div data-slot="dropdown-menu" x-data="{ open: false }" x-on:keydown.escape="open = false" class="relative inline-block text-left">
  <span data-slot="dropdown-menu-trigger" class="contents" x-on:click="open = !open">{{ trigger }}</span>
  <div role="menu" data-slot="dropdown-menu-content" x-show="open" x-cloak x-on:click.outside="open = false" x-on:click="open = false"
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    {{ attributes.cn(
      "absolute top-full z-50 mt-1 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
      {'start': 'left-0 origin-top-left', 'end': 'right-0 origin-top-right'}[align],
    ) }}>{{ slot }}</div>
</div>

components/ui/dropdown_menu_item.html

@props({'href': None, 'variant': 'default'})
<a role="menuitem" data-slot="dropdown-menu-item" @if(href)href="{{ href }}"@endif tabindex="0" {{ attributes.cn(
    "relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
    {'default': '', 'destructive': 'text-destructive hover:bg-destructive/10 focus:bg-destructive/10 dark:hover:bg-destructive/20'}[variant],
) }}>{{ slot }}</a>

components/ui/dropdown_menu_label.html

<div data-slot="dropdown-menu-label" {{ attributes.cn("px-2 py-1.5 text-sm font-medium") }}>{{ slot }}</div>

components/ui/dropdown_menu_separator.html

<div role="separator" data-slot="dropdown-menu-separator" {{ attributes.cn("-mx-1 my-1 h-px bg-border") }}></div>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <pb-ui.dropdown-menu> <pb-ui.dropdown-menu-item> <pb-ui.dropdown-menu-label> <pb-ui.dropdown-menu-separator> sont disponibles dans tous vos templates.

<pb-ui.dropdown-menu align="end">
  <pb-slot:trigger><pb-ui.button variant="outline">Open</pb-ui.button></pb-slot:trigger>
  <pb-ui.dropdown-menu-label>My account</pb-ui.dropdown-menu-label>
  <pb-ui.dropdown-menu-separator />
  <pb-ui.dropdown-menu-item href="/profile">Profile</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item variant="destructive">Log out</pb-ui.dropdown-menu-item>
</pb-ui.dropdown-menu>

Props

<pb-ui.dropdown-menu>

Prop	Défaut
trigger	''
align	'start'

<pb-ui.dropdown-menu-item>

Prop	Défaut
href	None
variant	'default'

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Toggle group Context menu ›