Menu (+ Menu Item)
A popover menu container with nested-submenu support — powers the sidebar's user-account menu (Theme, Advanced tools submenus, Log out).
Selectors: tip-menu, tip-menu-item
API — tip-menu
| Name | Type | Default | Description |
|---|---|---|---|
placement (input) |
MenuPlacement = 'top-start'|'bottom-start'|'top-end'|'bottom-end' |
'top-start' |
Popover anchor corner relative to the trigger. |
open (signal, read-only) |
boolean |
false |
Current open state (a signal, not an input) — read via menuRef.open(). |
openChange (output) |
boolean |
— | Emitted whenever open state changes (toggle, outside-click, Escape). |
[trigger] (slot) |
content | — | The clickable element that opens/closes the menu. |
| default slot | content | — | Menu body — any mix of tip-menu-item, section labels, dividers, custom blocks. |
API — tip-menu-item
| Name | Type | Default | Description |
|---|---|---|---|
icon (input) |
string | undefined |
undefined |
Leading icon. |
checked (input) |
boolean |
false |
Shows a trailing check glyph (e.g. active theme). |
badge (input) |
string | undefined |
undefined |
Small trailing pill (e.g. "Beta"). |
disabled (input) |
boolean |
false |
Disables click. |
submenu (input) |
boolean |
false |
Renders a chevron and reveals the [submenu] slot as a hover/focus flyout. |
select (output) |
void |
— | Emitted on click, unless the item opens/toggles a submenu. |
[submenu] (slot) |
content | — | Child tip-menu-item rows shown as a side flyout when submenu is true. |
Usage
<tip-menu placement="top-start">
<div trigger class="tip-sidebar__user">…</div>
<tip-menu-item icon="settings" (select)="openSettings()">Settings</tip-menu-item>
<tip-menu-item icon="moon" [submenu]="true">
Theme
<div submenu>
<tip-menu-item icon="sun" [checked]="theme() === 'light'" (select)="setTheme('light')">Light</tip-menu-item>
</div>
</tip-menu-item>
</tip-menu>
Notes
- Closes on outside-click (
HostListener('document:click')checks the host element) and onEscape— no explicit close button; callers wanting one should add it inside the projected content and call the menu's ownclose()method via a template ref. - Submenu overflow gotcha: the panel's
overflow: visible(notauto) is intentional so nested-submenu flyouts can escape the panel edges; don't addoverflow: hiddento.tip-menu__panelor submenus will clip. The sidebar rail itself also setsoverflow: visiblefor the same reason — clipping ancestors will cut off flyouts. - On narrow viewports (
max-width: 520px)tip-menu-item's submenu flips from a right-side flyout to a left-side one to avoid overflowing the viewport edge.