# salla-user-menu (https://docs.salla.dev/twilight/react/web-components/salla-user-menu)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

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 [#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).

```tsx
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 [#example]

```tsx
import { SallaUserMenu } from '@salla.sa/twilight-components-react/user-menu';

export function Example() {
  return (
    <SallaUserMenu showTrigger showHeader />
  );
}
```

```html
<salla-user-menu show-trigger show-header></salla-user-menu>
```

````ts
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>`](https://docs.salla.dev/twilight/react/web-components/salla-login-modal), [`<salla-loading>`](https://docs.salla.dev/twilight/react/web-components/salla-loading).
```