DocsComponentsDropdown menu

Dropdown menu

A menu opened by a trigger.

Alpine.jsdepends on button4 files

<pb-ui.dropdown-menu>
  <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</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item href="#">Billing</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-item href="#">Settings</pb-ui.dropdown-menu-item>
  <pb-ui.dropdown-menu-separator />
  <pb-ui.dropdown-menu-item variant="destructive">Log out</pb-ui.dropdown-menu-item>
</pb-ui.dropdown-menu>

Installation

pyblade-ui add dropdown-menu

Install the dependencies
button and Alpine.js, loaded in your <head>.

Copy these files into your project

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>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.dropdown-menu> <pb-ui.dropdown-menu-item> <pb-ui.dropdown-menu-label> <pb-ui.dropdown-menu-separator> are available in all your 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	Default
trigger	''
align	'start'

<pb-ui.dropdown-menu-item>

Prop	Default
href	None
variant	'default'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Toggle group Context menu ›