Menu
a popover list of actions opened from a trigger.
Example
Using it
API
Theming
Color (5)
Size & spacing (4)
a popover list of actions opened from a trigger.
Example
<div class="lucent-menu__anchor" data-lucent-menu>
<span class="lucent-button lucent-button--secondary lucent-button--md">
<button class="lucent-button__inner" type="button">
<span class="lucent-button__label">Actions</span>
<span class="lucent-icon lucent-icon--sm" aria-hidden="true">
<span class="material-icons lucent-icon__glyph">arrow_drop_down</span>
</span>
</button>
</span>
<div class="lucent-menu lucent-menu--bottom-start" role="menu" hidden>
<div class="lucent-menu-item" role="menuitem" tabindex="0">
<span class="lucent-icon lucent-icon--sm lucent-menu-item__icon" aria-hidden="true">
<span class="material-icons lucent-icon__glyph">edit</span>
</span>
<span class="lucent-menu-item__label">Rename</span>
</div>
<div class="lucent-menu-item" role="menuitem" tabindex="0">
<span class="lucent-icon lucent-icon--sm lucent-menu-item__icon" aria-hidden="true">
<span class="material-icons lucent-icon__glyph">content_copy</span>
</span>
<span class="lucent-menu-item__label">Duplicate</span>
</div>
<div class="lucent-divider lucent-divider--plain" role="separator">
</div>
<div class="lucent-menu-item is-danger" role="menuitem" tabindex="0">
<span class="lucent-icon lucent-icon--sm lucent-menu-item__icon" aria-hidden="true">
<span class="material-icons lucent-icon__glyph">delete</span>
</span>
<span class="lucent-menu-item__label">Delete</span>
</div>
</div>
</div><lucent-button variant="secondary" [lucentMenuTrigger]="actions">Actions</lucent-button>
<ng-template #actions>
<lucent-menu>
<lucent-menu-item icon="edit" label="Rename" (click)="rename()" />
<lucent-divider />
<lucent-menu-item icon="delete" label="Delete" variant="danger" />
</lucent-menu>
</ng-template>Using it
| Angular | [lucentMenuTrigger], lucent-menu-item import { LucentMenuTrigger, LucentMenuItem } from '@design-foundry/lucent-angular'; |
| Stylesheet | .lucent-menu-item @design-foundry/lucent-styles/core.css |
API
| Name | Kind | Type | Default | Description |
|---|---|---|---|---|
| [lucentMenuTrigger] lucentMenuTrigger | input | TemplateRef<void> | the ng-template holding the lucent-menu. | |
| [lucentMenuTrigger] lucentMenuPosition | input | MenuPosition | bottom-end | overlay placement. |
| menu-item label | input | string | '' | item text. |
| menu-item icon | input | string | '' | leading glyph. |
| menu-item active | input | boolean | false | keyboard highlight. |
| menu-item variant | input | default | danger | default | destructive intent. |
Theming