---
metaTitle: UserMenu component | AwesCode UI
meta:
  - name: description
    content: The <AwUserMenu /> component is used to render UserMenu - UI Vue component for AwesCode UI.
title: UserMenu
---

# AwUserMenu

**Category:** Layout (Internal) | **Import:** Dynamic

The `AwUserMenu` component is an internal layout component that displays the user menu dropdown in the header. It shows user avatar, profile link, theme toggle, and menu items.

## Overview

`AwUserMenu` provides a user menu solution with:
- User avatar display
- Profile link
- Theme toggle (dark/light)
- Menu items
- Dropdown menu
- Desktop/mobile interactions

## Usage

This component is typically used internally by layout components. Direct usage is not recommended unless building custom layouts.

### Internal Usage

```markup
<AwUserMenu
    :avatar="userAvatar"
    :name="userName"
    :info="userInfo"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| avatar | Path to user avatar image | `String` | `false` | `''` |
| name | User name | `String` | `false` | `''` |
| info | Additional info under user name | `String` | `false` | `''` |
| darkTheme | Is dark mode enabled (for internal use) | `Boolean` | `false` | `false` |
| outline | Use outline avatar style | `Boolean` | `false` | `false` |
| caret | Show dropdown caret icon | `Boolean` | `false` | `true` |
| vertical | Vertical menu layout | `Boolean` | `false` | `false` |
| showUser | Show user menu button | `Boolean` | `false` | `true` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Menu items | - | Profile link, theme toggle, menu items |
| user | Custom user button | - | Default avatar button |
| user-menu | Custom menu content | - | Default dropdown menu |
| after-profile | Content after profile section | - | - |

### Events

This component does not emit custom events.

## Related Components

- `AwAvatar` - Avatar component (used for user display)
- `AwUserpic` - User picture component (used in menu)
- `AwDropdown` - Dropdown component (used for menu)
- `AwNavItem` - Navigation item component
- `AwIcon` - Icon components

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a layout component
- Component is internal (used within layout components)
- User data is typically retrieved from Vuex store (`awesIo` module)
- Profile URL is managed via Vuex store
- Theme toggle switches between dark/light modes
- Desktop: hover to open, mouseleave to close
- Mobile: click to open, click outside to close
- Menu includes profile link, theme toggle, and custom menu items
- Avatar size changes based on `outline` prop (24px vs 40px)
- Dropdown positioning adjusts based on `vertical` prop
- Component uses `AwDropdown` for menu display