Skip to content

Latest commit

 

History

History
121 lines (116 loc) · 3.87 KB

DropdownMenu.mdx

File metadata and controls

121 lines (116 loc) · 3.87 KB
Raw
title description component radix
Dropdown Menu
Displays a menu to the user — such as a set of actions or functions — triggered by a button.
DropdownMenu

import React from "react"; import { Showcase, DropdownMenu, Button } from "@chimera-ui/components"; import { Cloud, CreditCard, Github, Keyboard, LifeBuoy, LogOut, Mail, MessageSquare, Plus, PlusCircle, Settings, User, UserPlus, Users, } from "lucide-react";

Usage

<DropdownMenu.Root>
  <DropdownMenu.Trigger asChild>
    <Button>Open</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content className="w-56">
    <DropdownMenu.Label>My Account</DropdownMenu.Label>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Item>
        <User className="mr-2 h-4 w-4" />
        <span>Profile</span>
        <DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <CreditCard className="mr-2 h-4 w-4" />
        <span>Billing</span>
        <DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <Settings className="mr-2 h-4 w-4" />
        <span>Settings</span>
        <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
      </DropdownMenu.Item>
      <DropdownMenu.Item>
        <Keyboard className="mr-2 h-4 w-4" />
        <span>Keyboard shortcuts</span>
        <DropdownMenu.Shortcut>⌘K</DropdownMenu.Shortcut>
      </DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Group>
      <DropdownMenu.Item>
        <Users className="mr-2 h-4 w-4" />
        <span>Team</span>
      </DropdownMenu.Item>
      <DropdownMenu.Sub>
        <DropdownMenu.SubTrigger>
          <UserPlus className="mr-2 h-4 w-4" />
          <span>Invite users</span>
        </DropdownMenu.SubTrigger>
        <DropdownMenu.Portal>
          <DropdownMenu.SubContent>
            <DropdownMenu.Item>
              <Mail className="mr-2 h-4 w-4" />
              <span>Email</span>
            </DropdownMenu.Item>
            <DropdownMenu.Item>
              <MessageSquare className="mr-2 h-4 w-4" />
              <span>Message</span>
            </DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item>
              <PlusCircle className="mr-2 h-4 w-4" />
              <span>More...</span>
            </DropdownMenu.Item>
          </DropdownMenu.SubContent>
        </DropdownMenu.Portal>
      </DropdownMenu.Sub>
      <DropdownMenu.Item>
        <Plus className="mr-2 h-4 w-4" />
        <span>New Team</span>
        <DropdownMenu.Shortcut>⌘+T</DropdownMenu.Shortcut>
      </DropdownMenu.Item>
    </DropdownMenu.Group>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>
      <Github className="mr-2 h-4 w-4" />
      <span>GitHub</span>
    </DropdownMenu.Item>
    <DropdownMenu.Item>
      <LifeBuoy className="mr-2 h-4 w-4" />
      <span>Support</span>
    </DropdownMenu.Item>
    <DropdownMenu.Item disabled>
      <Cloud className="mr-2 h-4 w-4" />
      <span>API</span>
    </DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>
      <LogOut className="mr-2 h-4 w-4" />
      <span>Log out</span>
      <DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>

</Showcase.Preview>