Skip to main contentSkip to sidebarSkip to headerSkip to footer

Dropdown Menu

A menu of actions or links that appears when a trigger is clicked.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "passport-ui";
import { Button } from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>Basic Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem variant="destructive">Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
 
{/* With checkboxes */}
<DropdownMenu>
  <DropdownMenuTrigger>
    <Button>List Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuGroup>
      <DropdownMenuLabel>Tasks</DropdownMenuLabel>
      <DropdownMenuCheckboxItem checked>Ticket 1</DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem>Ticket 2</DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem checked>Ticket 3</DropdownMenuCheckboxItem>
    </DropdownMenuGroup>
  </DropdownMenuContent>
</DropdownMenu>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗