x
1
2
3
4
5
6
7
8
9
10
<div class="relative inline-block" data-controller="ui--menu"><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:pointer-events-none disabled:bg-muted! disabled:text-muted-foreground! border border-input bg-background hover:bg-accent hover:text-accent-foreground disabled:border-input! h-9 px-4 py-2 disabled:cursor-not-allowed" aria-busy="false" id="ui-menu-trigger-ui-menu-790b517d" aria-haspopup="true" aria-expanded="false" aria-controls="ui-menu-content-ui-menu-790b517d" data-ui--menu-target="trigger" data-action="click->ui--menu#toggle keydown->ui--menu#triggerKeydown">Open Menu</button> <div id="ui-menu-content-ui-menu-790b517d" class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md flex flex-col gap-[5px] animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2" role="menu" aria-orientation="vertical" data-ui--menu-target="content" hidden="hidden" data-side="bottom" data-align="start" tabindex="-1"> <div class="px-2 py-1.5 text-sm font-semibold text-muted-foreground">My Account</div> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Profile</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Billing</button> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all" role="menuitem" tabindex="-1" data-ui--menu-target="item">Settings</button> <div class="-mx-1 h-px bg-muted" role="separator" aria-orientation="horizontal"></div> <button class="relative flex cursor-default select-none items-center gap-2 rounded w-full px-2 py-1 text-sm whitespace-nowrap border-0 bg-transparent outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 aria-checked:bg-accent aria-checked:text-accent-foreground aria-checked:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50 transition-all text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive" role="menuitem" tabindex="-1" data-ui--menu-target="item">Log out</button> </div></div>1
2
3
4
5
6
7
8
9
10
11
render(UI::Menu.new) do |menu| menu.with_trigger(variant: :outline) { "Open Menu" } menu.with_content(side: side.to_sym, align: align.to_sym) do |content| content.with_label("My Account") content.with_item("Profile") content.with_item("Billing") content.with_item("Settings") content.with_divider content.with_item("Log out", variant: :destructive) endendNo notes provided.