Skip to content

Commit b13e0c2

Browse files
authored
docs(UserMenu): add code examples for opening the menu (#7375)
1 parent d4b4db7 commit b13e0c2

File tree

1 file changed

+61
-0
lines changed

1 file changed

+61
-0
lines changed

packages/main/src/webComponents/UserMenu/UserMenu.mdx

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,67 @@ import * as ComponentStories from './UserMenu.stories';
1919

2020
<ControlsWithNote of={ComponentStories.Default} />
2121

22+
## Open UserMenu
23+
24+
The `UserMenu` requires an `opener` so it knows where to anchor itself when opened.
25+
To provide this, you can either:
26+
27+
- Assign an `id` to the element rendered in the `profile` slot.
28+
- Use the `targetRef` provided in the `detail` of the `onProfileClick` event properties.
29+
30+
### Via `targetRef`
31+
32+
```tsx
33+
function RefOpener() {
34+
const [open, setOpen] = useState(false);
35+
const userMenuRef = useRef<UserMenuDomRef>(null);
36+
return (
37+
<>
38+
<ShellBar
39+
onProfileClick={(e) => {
40+
const { targetRef } = e.detail;
41+
userMenuRef.current.opener = targetRef;
42+
setOpen(true);
43+
}}
44+
profile={<Avatar initials="JD" />}
45+
/>
46+
<UserMenu
47+
ref={userMenuRef}
48+
open={open}
49+
onClose={() => {
50+
setOpen(false);
51+
}}
52+
/>
53+
</>
54+
);
55+
}
56+
```
57+
58+
### Via `id`
59+
60+
```tsx
61+
function IdOpener() {
62+
const [open, setOpen] = useState(false);
63+
return (
64+
<>
65+
<ShellBar
66+
onProfileClick={(e) => {
67+
setOpen(true);
68+
}}
69+
profile={<Avatar initials="JD" id="userMenuOpener" />}
70+
/>
71+
<UserMenu
72+
open={open}
73+
opener="userMenuOpener"
74+
onClose={() => {
75+
setOpen(false);
76+
}}
77+
/>
78+
</>
79+
);
80+
}
81+
```
82+
2283
<Markdown>{SubcomponentsSection}</Markdown>
2384

2485
## UserMenuAccount

0 commit comments

Comments
 (0)