shipbase/ui

import {
  Cloud,
  CreditCard,
  Github,
  Keyboard,
  LifeBuoy,
  LogOut,
  Mail,
  MessageSquare,
  Plus,
  PlusCircle,
  Settings,
  User,
  UserPlus,
  Users,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuSeparator,
  MenuTrigger,
  MenuTriggerItem,
} from "@/components/ui/menu"

export default function MenuDemo() {
  return (
    <Menu>
      <MenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </MenuTrigger>
      <MenuContent className="w-56">
        <MenuItemGroup>
          <MenuItemGroupLabel>My Account</MenuItemGroupLabel>
          <MenuSeparator />
          <MenuItem value="Profile">
            <User className="mr-2 h-4 w-4" />
            <span>Profile</span>
          </MenuItem>
          <MenuItem value="Billing">
            <CreditCard className="mr-2 h-4 w-4" />
            <span>Billing</span>
          </MenuItem>
          <MenuItem value="Settings">
            <Settings className="mr-2 h-4 w-4" />
            <span>Settings</span>
          </MenuItem>
          <MenuItem value="Keyboard shortcuts">
            <Keyboard className="mr-2 h-4 w-4" />
            <span>Keyboard shortcuts</span>
          </MenuItem>
        </MenuItemGroup>
        <MenuSeparator />
        <MenuItemGroup>
          <MenuItem value="Team">
            <Users className="mr-2 h-4 w-4" />
            <span>Team</span>
          </MenuItem>
          <Menu>
            <MenuTriggerItem>
              <UserPlus className="mr-2 h-4 w-4" />
              <span>Invite users</span>
            </MenuTriggerItem>
            <MenuContent>
              <MenuItem value="Email">
                <Mail className="mr-2 h-4 w-4" />
                <span>Email</span>
              </MenuItem>
              <MenuItem value="Message">
                <MessageSquare className="mr-2 h-4 w-4" />
                <span>Message</span>
              </MenuItem>
              <MenuSeparator />
              <MenuItem value="more">
                <PlusCircle className="mr-2 h-4 w-4" />
                <span>More...</span>
              </MenuItem>
            </MenuContent>
          </Menu>
          <MenuItem value="New Team">
            <Plus className="mr-2 h-4 w-4" />
            <span>New Team</span>
          </MenuItem>
        </MenuItemGroup>
        <MenuSeparator />
        <MenuItem value="GitHub">
          <Github className="mr-2 h-4 w-4" />
          <span>GitHub</span>
        </MenuItem>
        <MenuItem value="Support">
          <LifeBuoy className="mr-2 h-4 w-4" />
          <span>Support</span>
        </MenuItem>
        <MenuItem value="API" disabled>
          <Cloud className="mr-2 h-4 w-4" />
          <span>API</span>
        </MenuItem>
        <MenuSeparator />
        <MenuItem value="Log out">
          <LogOut className="mr-2 h-4 w-4" />
          <span>Log out</span>
        </MenuItem>
      </MenuContent>
    </Menu>
  )
}

Installation

Copy and paste the following code into your project.

"use client"

import * as React from "react"

import { Menu as MenuPrimitive } from "@ark-ui/react/menu"
import { Portal } from "@ark-ui/react/portal"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const Menu = MenuPrimitive.Root

const MenuTrigger = MenuPrimitive.Trigger

const MenuItemGroup = MenuPrimitive.ItemGroup

const MenuRadioItemGroup = MenuPrimitive.RadioItemGroup

const MenuContextTrigger = MenuPrimitive.ContextTrigger

const MenuIndicator = MenuPrimitive.Indicator

const MenuItemText = MenuPrimitive.ItemText

const MenuTriggerItem = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.TriggerItem>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.TriggerItem> & {
    inset?: boolean
  }
>(({ className, inset, children, ...props }, ref) => (
  <MenuPrimitive.TriggerItem
    ref={ref}
    className={cn(
      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[state=open]:bg-accent",
      inset && "pl-8",
      className
    )}
    {...props}
  >
    {children}
    <ChevronRight className="ml-auto h-4 w-4" />
  </MenuPrimitive.TriggerItem>
))
MenuTriggerItem.displayName = MenuPrimitive.TriggerItem.displayName

const MenuContent = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Content>
>(({ className, ...props }, ref) => (
  <Portal>
    <MenuPrimitive.Positioner>
      <MenuPrimitive.Content
        ref={ref}
        className={cn(
          "fade-in-80 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 min-w-[8rem] animate-in overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
          className
        )}
        {...props}
      />
    </MenuPrimitive.Positioner>
  </Portal>
))
MenuContent.displayName = MenuPrimitive.Content.displayName

const MenuItem = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenuPrimitive.Item
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenuItem.displayName = MenuPrimitive.Item.displayName

const MenuCheckboxItem = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
  <MenuPrimitive.CheckboxItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
      className
    )}
    checked={checked}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenuPrimitive.ItemIndicator>
        <Check className="h-4 w-4" />
      </MenuPrimitive.ItemIndicator>
    </span>
    <MenuPrimitive.ItemText>{children}</MenuPrimitive.ItemText>
  </MenuPrimitive.CheckboxItem>
))
MenuCheckboxItem.displayName = MenuPrimitive.CheckboxItem.displayName

const MenuRadioItem = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.RadioItem>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
  <MenuPrimitive.RadioItem
    ref={ref}
    className={cn(
      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
      className
    )}
    {...props}
  >
    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
      <MenuPrimitive.ItemIndicator>
        <Circle className="h-2 w-2 fill-current" />
      </MenuPrimitive.ItemIndicator>
    </span>
    <MenuPrimitive.ItemText> {children}</MenuPrimitive.ItemText>
  </MenuPrimitive.RadioItem>
))
MenuRadioItem.displayName = MenuPrimitive.RadioItem.displayName

const MenuItemGroupLabel = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.ItemGroupLabel>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.ItemGroupLabel> & {
    inset?: boolean
  }
>(({ className, inset, ...props }, ref) => (
  <MenuPrimitive.ItemGroupLabel
    ref={ref}
    className={cn(
      "px-2 py-1.5 font-semibold text-sm",
      inset && "pl-8",
      className
    )}
    {...props}
  />
))
MenuItemGroupLabel.displayName = MenuPrimitive.ItemGroupLabel.displayName

const MenuSeparator = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.Separator>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
  <MenuPrimitive.Separator
    ref={ref}
    className={cn("-mx-1 my-1 h-px bg-muted", className)}
    {...props}
  />
))
MenuSeparator.displayName = MenuPrimitive.Separator.displayName

const MenuArrow = React.forwardRef<
  React.ElementRef<typeof MenuPrimitive.Arrow>,
  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>
>(({ className, ...props }, ref) => (
  <MenuPrimitive.Arrow>
    <MenuPrimitive.ArrowTip
      ref={ref}
      className={cn("border-t-[1px] border-l-[1px]", className)}
      {...props}
    />
  </MenuPrimitive.Arrow>
))
MenuArrow.displayName = MenuPrimitive.Arrow.displayName

export {
  Menu,
  MenuArrow,
  MenuCheckboxItem,
  MenuContent,
  MenuContextTrigger,
  MenuIndicator,
  MenuItem,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuItemText,
  MenuRadioItem,
  MenuRadioItemGroup,
  MenuSeparator,
  MenuTrigger,
  MenuTriggerItem,
}

Not Found

Update the import paths to match your project setup.

Usage

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuSeparator,
  MenuTrigger,
  MenuTriggerItem,
} from "@/components/ui/menu"

<Menu>
  <MenuTrigger>Open</MenuTrigger>
  <MenuContent>
    <MenuItemGroup>
      <MenuItemGroupLabel>My Account</MenuItemGroupLabel>
      <MenuSeparator />
      <MenuItem value="Profile">Profile</MenuItem>
      <MenuItem value="Billing">Billing</MenuItem>
      <MenuItem value="Settings">Settings</MenuItem>
      <MenuItem value="Keyboard shortcuts">Keyboard shortcuts</MenuItem>
    </MenuItemGroup>
  </MenuContent>
</Menu>

Examples

Checkboxes

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu"

export default function MenuCheckboxes() {
  const [showStatusBar, setShowStatusBar] = React.useState(true)
  const [showActivityBar, setShowActivityBar] = React.useState(false)
  const [showPanel, setShowPanel] = React.useState(false)

  return (
    <Menu>
      <MenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </MenuTrigger>
      <MenuContent className="w-56">
        <MenuItemGroup>
          <MenuItemGroupLabel>Appearance</MenuItemGroupLabel>
          <MenuSeparator />
        </MenuItemGroup>
        <MenuCheckboxItem
          value="status-bar"
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Status Bar
        </MenuCheckboxItem>
        <MenuCheckboxItem
          value="activity-bar"
          checked={showActivityBar}
          onCheckedChange={setShowActivityBar}
          disabled
        >
          Activity Bar
        </MenuCheckboxItem>
        <MenuCheckboxItem
          value="panel"
          checked={showPanel}
          onCheckedChange={setShowPanel}
        >
          Panel
        </MenuCheckboxItem>
      </MenuContent>
    </Menu>
  )
}

Radio Group

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Menu,
  MenuContent,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuRadioItem,
  MenuRadioItemGroup,
  MenuSeparator,
  MenuTrigger,
} from "@/components/ui/menu"

export default function MenuCheckboxes() {
  const [position, setPosition] = React.useState("bottom")

  return (
    <Menu>
      <MenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </MenuTrigger>
      <MenuContent className="w-56">
        <MenuItemGroup>
          <MenuItemGroupLabel>Panel Position</MenuItemGroupLabel>
          <MenuSeparator />
          <MenuRadioItemGroup
            value={position}
            onValueChange={(e) => setPosition(e.value)}
          >
            <MenuRadioItem value="top">Top</MenuRadioItem>
            <MenuRadioItem value="bottom">Bottom</MenuRadioItem>
            <MenuRadioItem value="right">Right</MenuRadioItem>
          </MenuRadioItemGroup>
        </MenuItemGroup>
      </MenuContent>
    </Menu>
  )
}

import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuContextTrigger,
  MenuItem,
  MenuItemGroup,
  MenuItemGroupLabel,
  MenuRadioItem,
  MenuRadioItemGroup,
  MenuSeparator,
  MenuTriggerItem,
} from "@/components/ui/menu"

export default function ContextMenu() {
  return (
    <Menu>
      <MenuContextTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </MenuContextTrigger>
      <MenuContent className="w-64">
        <MenuItem inset value="back">
          Back
        </MenuItem>
        <MenuItem inset disabled value="forward">
          Forward
        </MenuItem>
        <MenuItem inset value="reload">
          Reload
        </MenuItem>
        <Menu>
          <MenuTriggerItem inset>More Tools</MenuTriggerItem>
          <MenuContent className="w-48">
            <MenuItem value="save page">Save Page As...</MenuItem>
            <MenuItem value="create shortcut">Create Shortcut...</MenuItem>
            <MenuItem value="name widnow">Name Window...</MenuItem>
            <MenuSeparator />
            <MenuItem value="developer tools">Developer Tools</MenuItem>
          </MenuContent>
        </Menu>
        <MenuSeparator />
        <MenuCheckboxItem value="show bookmarks" checked>
          Show Bookmarks Bar
        </MenuCheckboxItem>
        <MenuCheckboxItem value="show full" checked={false}>
          Show Full URLs
        </MenuCheckboxItem>
        <MenuSeparator />
        <MenuItemGroup>
          <MenuRadioItemGroup value="pedro">
            <MenuItemGroupLabel inset>People</MenuItemGroupLabel>
            <MenuSeparator />
            <MenuRadioItem value="pedro">Pedro Duarte</MenuRadioItem>
            <MenuRadioItem value="colm">Colm Tuite</MenuRadioItem>
          </MenuRadioItemGroup>
        </MenuItemGroup>
      </MenuContent>
    </Menu>
  )
}

Menu

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

Checkboxes

Radio Group

Context Menu