Dropdown Menu
The <pines-dropdown-menu> component renders a user profile dropdown, typically placed in a site header or navigation bar. It displays a user avatar, name, and a list of contextual menu options such as profile settings, account management, and logout. Each menu item is added as a <pines-dropdown-menu-option> child component.
<pines-dropdown-menu> Properties
| Attribute | Type | Description |
header
|
string
|
Short text displayed at the top of the dropdown panel, above the user details. Use for section labels such as "My Account" to orient the user within the menu. |
user-name
|
string
|
The authenticated user's display name shown in the dropdown header. Use the user's full name or username to personalize the experience. |
image-url
|
string
|
URL of the user's avatar image displayed in the dropdown header. When provided, the image is shown as a circular thumbnail alongside the user's name. |
<dropdown-menu-option> Properties
| Attribute | Type | Description |
link
|
string
|
URL or route that the menu item navigates to when clicked. Use relative paths for internal routes (such as /settings) or absolute URLs for external links. |
<dropdown-separator>
No configurable parameters. Renders a visual divider between menu options.