Menu
Menus display a list of choices on temporary surfaces.
Usage
<wc-menu-list>
<wc-menu-item value="profile"><wc-icon name="home" slot="leading-icon"></wc-icon>Profile</wc-menu-item>
<wc-menu-item value="account">Account Settings</wc-menu-item>
<wc-menu-item value="account" selected="true">Notification Settings</wc-menu-item>
<wc-divider></wc-divider>
<wc-menu-item disabled="true">Settings (Disabled)</wc-menu-item>
<wc-menu-item value="logout">Logout</wc-menu-item>
</wc-menu-list>
<wc-menu-list variant="vibrant">
<wc-menu-item value="profile">Profile</wc-menu-item>
<wc-menu-item value="account">Account Settings</wc-menu-item>
<wc-menu-item value="account" selected="true">Notification Settings</wc-menu-item>
<wc-divider></wc-divider>
<wc-menu-item disabled="true">Settings (Disabled)</wc-menu-item>
<wc-menu-item value="logout">Logout</wc-menu-item>
</wc-menu-list>
Slots
<pc-menu class="menu">
<pc-menu-item value="cut">
<wc-icon name="cut" slot="start" size="sm"></wc-icon>
Cut
<span slot="end">⌘X</span>
</pc-menu-item>
<pc-menu-item value="copy">
<wc-icon name="copy" slot="start" size="sm"></wc-icon>
Copy
<span slot="end">⌘C</span>
</pc-menu-item>
<pc-menu-item value="paste">
<wc-icon name="paste" slot="start" size="sm"></wc-icon>
Paste
<span slot="end">⌘X</span>
</pc-menu-item>
<pc-menu-divider></pc-menu-divider>
<pc-menu-item value="delete">
<wc-icon name="trash-can" slot="start" size="sm"></wc-icon>
Delete
<span slot="end">←</span>
</pc-menu-item>
</pc-menu>
<pc-menu class="menu" style="width: 300px">
<pc-menu-item value="shivaji" selected="true">
<pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=74943b7fc5a9da2affe8c2d8b8558812" size="40px" slot="start"></pc-avatar>
<div class="user-info">
<pc-text type="heading" heading-size="2" class="no-margin">Shivaji Varma</pc-text>
<pc-text type="body-compact" color="secondary">Software Engineer</pc-text>
</div>
</pc-menu-item>
<pc-menu-item value="john">
<pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=6801be2ffb4809eefe713e4fefd7b9ae" size="40px" slot="start"></pc-avatar>
<div class="user-info">
<pc-text type="heading" heading-size="2" class="no-margin">John doe</pc-text>
<pc-text type="body-compact" color="secondary">Manager</pc-text>
</div>
</pc-menu-item>
<pc-menu-item value="fred">
<pc-avatar src="https://doodleipsum.com/40x40/avatar-3?i=5ff278e220eacb10b8e37efefef406a6" size="40px" slot="start"></pc-avatar>
<div class="user-info">
<pc-text type="heading" heading-size="2" class="no-margin">Fred</pc-text>
<pc-text type="body-compact" color="secondary">Director</pc-text>
</div>
</pc-menu-item>
</pc-menu>
Events
const $list = document.querySelector('.menu');
$list.addEventListener('pc-menu-item--click',
function(evt) {
console.log('' + JSON.stringify(evt.detail.value, null, 4) + '
');
});
On this page