salla-user-menu
Account menu for the store header.
Account menu for the store header. For a guest it renders a login button; for a logged-in customer it renders a
dropdown (or an inline list with inline) linking to notifications, orders, pending orders, wishlist, wallet,
loyalty points, profile and logout. Use it once in the header of a theme.
The wallet link shows only when window.can_access_wallet is truthy, and the loyalty points link only when the store
has the loyalty-system feature. Adding the attribute with-rating (read once on load, not a prop) adds a rating link.
Clicking the trigger toggles the dropdown and clicking anywhere else on the page closes it.
Use it
In HTML or JSX, use the tag <salla-user-menu> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaUserMenu } from '@salla.sa/twilight-components-react/user-menu';Client-only. On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.
Example
import { SallaUserMenu } from '@salla.sa/twilight-components-react/user-menu';
export function Example() {
return (
<SallaUserMenu showTrigger showHeader />
);
}Custom trigger markup
```html
<salla-user-menu>
<div slot="trigger"><img src="{avatar}" alt="{first_name}" /> {hello} {first_name} {last_name} {icon}</div>
</salla-user-menu>
## Properties
| Property | Attribute | Description | Type | Default |
| --- | --- | --- | --- | --- |
| `avatarOnly` | `avatar-only` | Shows only the avatar in the trigger and hides the name and greeting (adds the `s-user-menu-trigger-avatar-only` class). | `boolean` | `false` |
| `inline` | `inline` | Renders only the list of links, without the trigger and the dropdown. Only applies to logged-in customers. | `boolean` | `false` |
| `relativeDropdown` | `relative-dropdown` | Adds the `s-user-menu-relative-dropdown` class to the wrapper so the theme can position the dropdown relative to its parent element. | `boolean` | `false` |
| `showHeader` | `show-header` | Shows a header inside the dropdown with the customer's avatar, greeting and name, plus a close button. | `boolean` | `false` |
| `showTrigger` | `show-trigger` | For guests only: when true and no `salla-login-modal` exists on the page, the component mounts one at the end of the body so the login button can open it. It does not affect what a logged-in customer sees. | `boolean` | `false` |
## Slots
| Slot | Description |
| --- | --- |
| `login-btn` | Replaces the login button, it must be used with `salla.event.dispatch('login::open')` to open the login modal. |
| `trigger` | Replaces trigger widget, has replaceable props `{avatar}`, `{hello}`, `{first_name}`, `{last_name}`, `{icon}`. |
## Related
Renders: [`<salla-login-modal>`](/web-components/salla-login-modal), [`<salla-loading>`](/web-components/salla-loading).