Menu

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuSeparator,} from "moduix";export function MenuDemo() {  return (    <Menu>      <MenuTrigger render={<Button />}>        Song        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuItem closeOnClick>Add to Library</MenuItem>        <MenuItem closeOnClick>Add to Playlist</MenuItem>        <MenuSeparator />        <MenuItem closeOnClick>Play Next</MenuItem>        <MenuItem closeOnClick>Play Last</MenuItem>        <MenuSeparator />        <MenuItem closeOnClick disabled>          Share        </MenuItem>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuSeparator,} from "moduix";export function WithoutArrowMenu() {  return (    <Menu>      <MenuTrigger render={<Button />}>        Song        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent withArrow={false}>        <MenuItem closeOnClick>Add to Library</MenuItem>        <MenuItem closeOnClick>Add to Playlist</MenuItem>        <MenuSeparator />        <MenuItem closeOnClick>Play Next</MenuItem>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuGroup,  MenuGroupLabel,  MenuRadioGroup,  MenuRadioItem,  MenuRadioItemIndicator,  MenuItemText,  MenuSeparator,  MenuCheckboxItem,  MenuCheckboxItemIndicator,} from "moduix";import { useState } from "react";export function GroupsAndControlsMenu() {  const [sortBy, setSortBy] = useState("date");  const [showMinimap, setShowMinimap] = useState(true);  return (    <Menu>      <MenuTrigger render={<Button />}>        View        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuGroup>          <MenuGroupLabel>Sort</MenuGroupLabel>          <MenuRadioGroup value={sortBy} onValueChange={setSortBy}>            <MenuRadioItem value="date">              <MenuRadioItemIndicator />              <MenuItemText>Date</MenuItemText>            </MenuRadioItem>            <MenuRadioItem value="name">              <MenuRadioItemIndicator />              <MenuItemText>Name</MenuItemText>            </MenuRadioItem>          </MenuRadioGroup>        </MenuGroup>        <MenuSeparator />        <MenuGroup>          <MenuGroupLabel>Workspace</MenuGroupLabel>          <MenuCheckboxItem checked={showMinimap} onCheckedChange={setShowMinimap}>            <MenuCheckboxItemIndicator />            <MenuItemText>Minimap</MenuItemText>          </MenuCheckboxItem>        </MenuGroup>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuItemShortcut,  MenuSeparator,} from "moduix";export function ShortcutsMenu() {  return (    <Menu>      <MenuTrigger render={<Button />}>        Edit        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuItem closeOnClick>          Copy          <MenuItemShortcut>Ctrl+C</MenuItemShortcut>        </MenuItem>        <MenuItem closeOnClick>          Paste          <MenuItemShortcut>Ctrl+V</MenuItemShortcut>        </MenuItem>        <MenuSeparator />        <MenuItem closeOnClick>          Rename          <MenuItemShortcut>F2</MenuItemShortcut>        </MenuItem>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuCheckboxItem,  MenuItemText,  MenuItemTextContent,  MenuItemTextIcon,  InfoIcon,  MenuItemTextLabel,  MenuCheckboxItemIndicator,} from "moduix";import { useState } from "react";export function IndicatorRightMenu() {  const [showMinimap, setShowMinimap] = useState(true);  return (    <Menu>      <MenuTrigger render={<Button />}>        View        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuCheckboxItem checked={showMinimap} onCheckedChange={setShowMinimap} indicator="end">          <MenuItemText>            <MenuItemTextContent>              <MenuItemTextIcon>                <InfoIcon />              </MenuItemTextIcon>              <MenuItemTextLabel>Minimap</MenuItemTextLabel>            </MenuItemTextContent>          </MenuItemText>          <MenuCheckboxItemIndicator />        </MenuCheckboxItem>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuSubmenu,  MenuSubmenuTrigger,  MenuSubmenuTriggerIcon,  MenuSubmenuContent,  MenuSeparator,} from "moduix";export function NestedMenu() {  return (    <Menu>      <MenuTrigger render={<Button />}>        Song        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuItem closeOnClick>Add to Library</MenuItem>        <MenuSubmenu>          <MenuSubmenuTrigger>            Add to Playlist            <MenuSubmenuTriggerIcon />          </MenuSubmenuTrigger>          <MenuSubmenuContent>            <MenuItem closeOnClick>Get Up!</MenuItem>            <MenuItem closeOnClick>Inside Out</MenuItem>            <MenuItem closeOnClick>Night Beats</MenuItem>            <MenuSeparator />            <MenuItem closeOnClick>New Playlist...</MenuItem>          </MenuSubmenuContent>        </MenuSubmenu>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuSeparator,} from "moduix";export function OpenOnHoverMenu() {  return (    <Menu>      <MenuTrigger render={<Button />} openOnHover delay={120}>        Add to playlist        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuItem closeOnClick>Get Up!</MenuItem>        <MenuItem closeOnClick>Inside Out</MenuItem>        <MenuItem closeOnClick>Night Beats</MenuItem>        <MenuSeparator />        <MenuItem closeOnClick>New Playlist...</MenuItem>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuSeparator,} from "moduix";export function PositionedWithBackdropMenu() {  return (    <Menu>      <MenuTrigger render={<Button />}>        Export        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent side="right" align="start" sideOffset={12} withBackdrop>        <MenuItem closeOnClick>Export PNG</MenuItem>        <MenuItem closeOnClick>Export PDF</MenuItem>        <MenuSeparator />        <MenuItem closeOnClick>Copy share link</MenuItem>      </MenuContent>    </Menu>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuItem,  MenuSeparator,  AlertDialog,  AlertDialogAction,  AlertDialogCancel,  AlertDialogContent,  AlertDialogDescription,  AlertDialogFooter,  AlertDialogHeader,  AlertDialogTitle,} from "moduix";import { useState, Fragment } from "react";export function OpenAlertDialogMenu() {  const [dialogOpen, setDialogOpen] = useState(false);  return (    <Fragment>      <Menu>        <MenuTrigger render={<Button />}>          Project          <MenuTriggerIcon />        </MenuTrigger>        <MenuContent>          <MenuItem closeOnClick>Rename</MenuItem>          <MenuItem closeOnClick>Duplicate</MenuItem>          <MenuSeparator />          <MenuItem            closeOnClick            onClick={() => {              setDialogOpen(true);            }}          >            Delete...          </MenuItem>        </MenuContent>      </Menu>      <AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>        <AlertDialogContent>          <AlertDialogHeader>            <AlertDialogTitle>Delete project?</AlertDialogTitle>            <AlertDialogDescription>              This action cannot be undone and will permanently remove all environments.            </AlertDialogDescription>          </AlertDialogHeader>          <AlertDialogFooter>            <AlertDialogCancel>Cancel</AlertDialogCancel>            <AlertDialogAction>Delete</AlertDialogAction>          </AlertDialogFooter>        </AlertDialogContent>      </AlertDialog>    </Fragment>  );}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  MenuContent,  MenuLinkItem,  MenuSeparator,  MenuItem,} from "moduix";export function LinkItemsMenu() {  return (    <Menu>      <MenuTrigger render={<Button />}>        Navigate        <MenuTriggerIcon />      </MenuTrigger>      <MenuContent>        <MenuLinkItem href="#projects">Projects</MenuLinkItem>        <MenuLinkItem href="#teams">Teams</MenuLinkItem>        <MenuLinkItem href="#billing">Billing</MenuLinkItem>        <MenuSeparator />        <MenuItem closeOnClick>Copy Link</MenuItem>      </MenuContent>    </Menu>  );}

import {  Button,  createMenuHandle,  MenuTrigger,  MenuTriggerIcon,  Menu,  MenuContent,  MenuItem,  MenuSeparator,} from "moduix";import { useMemo, Fragment } from "react";export function DetachedTriggerMenu() {  const menuHandle = useMemo(() => createMenuHandle(), []);  return (    <Fragment>      <div className={styles.detachedTrigger}>        <MenuTrigger render={<Button />} handle={menuHandle}>          Actions          <MenuTriggerIcon />        </MenuTrigger>      </div>      <Menu handle={menuHandle}>        <MenuContent>          <MenuItem closeOnClick>Edit</MenuItem>          <MenuItem closeOnClick>Share</MenuItem>          <MenuSeparator />          <MenuItem closeOnClick>Archive</MenuItem>        </MenuContent>      </Menu>    </Fragment>  );}

.detachedTrigger {  display: flex;  justify-content: center;  margin-bottom: var(--spacing-4);}

import {  Button,  Menu,  MenuTrigger,  MenuTriggerIcon,  ChevronDownIcon,  MenuContent,  MenuItem,  MenuItemTextContent,  MenuItemTextIcon,  MapIcon,  MenuItemTextLabel,  MenuSubmenu,  MenuSubmenuTrigger,  InfoIcon,  MenuSubmenuTriggerIcon,  MenuSubmenuContent,} from "moduix";export function CustomStylesMenu() {  return (    <Menu>      <MenuTrigger render={<Button />} className={styles.customTrigger}>        Places        <MenuTriggerIcon className={styles.customTriggerIcon}>          <ChevronDownIcon />        </MenuTriggerIcon>      </MenuTrigger>      <MenuContent        className={styles.customPopup}        classNames={{          portal: styles.customPortal,          backdrop: styles.customBackdrop,          positioner: styles.customPositioner,        }}        withBackdrop      >        <MenuItem closeOnClick className={styles.customItem}>          <MenuItemTextContent>            <MenuItemTextIcon>              <MapIcon />            </MenuItemTextIcon>            <MenuItemTextLabel>Open map</MenuItemTextLabel>          </MenuItemTextContent>        </MenuItem>        <MenuSubmenu>          <MenuSubmenuTrigger className={styles.customItem}>            <MenuItemTextContent>              <MenuItemTextIcon>                <InfoIcon />              </MenuItemTextIcon>              <MenuItemTextLabel>More</MenuItemTextLabel>            </MenuItemTextContent>            <MenuSubmenuTriggerIcon>              <ChevronDownIcon />            </MenuSubmenuTriggerIcon>          </MenuSubmenuTrigger>          <MenuSubmenuContent>            <MenuItem closeOnClick className={styles.customItem}>              Nearby            </MenuItem>            <MenuItem closeOnClick className={styles.customItem}>              Routes            </MenuItem>          </MenuSubmenuContent>        </MenuSubmenu>      </MenuContent>    </Menu>  );}

.customTrigger {  border-color: var(--color-primary);  background:    linear-gradient(var(--color-background), var(--color-background)) padding-box,    linear-gradient(135deg, var(--color-primary), var(--color-ring)) border-box;  color: var(--color-primary);}.customTriggerIcon {  --menu-trigger-icon-size: 0.875rem;}.customPortal {  position: relative;}.customBackdrop {  background-color: rgb(0 0 0 / 0.08);  backdrop-filter: blur(0.125rem);}.customPositioner {  z-index: var(--z-popup);}.customPopup {  --menu-popup-min-width: 13rem;  --menu-popup-bg: var(--color-background);  --menu-popup-border-color: var(--color-primary);  --menu-popup-shadow: var(--shadow-lg);  --menu-highlight-bg: var(--color-primary);  --menu-highlight-color: var(--color-primary-foreground);  --menu-separator-color: var(--color-primary);}.customItem {  --menu-item-padding-x-start: var(--spacing-3);  --menu-item-padding-x-end: var(--spacing-3);  --menu-item-text-icon-color: var(--color-primary);}