Menu · Vitreo

Preview

Installation

Install the package once, then import the parts you use into a standalone component.

Install

$ npm install ngx-vitreo @angular/cdk @floating-ui/dom

Import

import { GlassMenu, GlassMenuTrigger, GlassMenuContent, GlassMenuItem, GlassMenuCheckboxItem, GlassMenuRadioGroup, GlassMenuRadioItem, GlassMenuGroup / GlassMenuLabel / GlassMenuSeparator / GlassMenuShortcut, GlassMenuSub / GlassMenuSubTrigger, GlassMenuSubContent } from 'ngx-vitreo';

@Component({
  imports: [GlassMenu, GlassMenuTrigger, GlassMenuContent, GlassMenuItem, GlassMenuCheckboxItem, GlassMenuRadioGroup, GlassMenuRadioItem, GlassMenuGroup / GlassMenuLabel / GlassMenuSeparator / GlassMenuShortcut, GlassMenuSub / GlassMenuSubTrigger, GlassMenuSubContent],
  // ...
})

Usage

<glass-menu>
  <button glassButton glassMenuTrigger>Edit</button>
  <glass-menu-content>
    <glass-menu-label>View</glass-menu-label>
    <glass-menu-checkbox-item [(checked)]="showGrid">Show grid</glass-menu-checkbox-item>
    <glass-menu-separator />
    <glass-menu-sub>
      <glass-menu-sub-trigger>Sort by</glass-menu-sub-trigger>
      <glass-menu-sub-content>
        <glass-menu-radio-group [(value)]="sort">
          <glass-menu-radio-item value="name">Name</glass-menu-radio-item>
          <glass-menu-radio-item value="date">Date</glass-menu-radio-item>
        </glass-menu-radio-group>
      </glass-menu-sub-content>
    </glass-menu-sub>
    <glass-menu-separator />
    <glass-menu-item (select)="undo()">
      Undo <glass-menu-shortcut>⌘Z</glass-menu-shortcut>
    </glass-menu-item>
    <glass-menu-item tone="destructive">Delete</glass-menu-item>
  </glass-menu-content>
</glass-menu>

API reference

`GlassMenu`

glass-menu

Input	Type	Default	Description
`modal`	`boolean`	`false`	Locks page scroll and hides the page from assistive technology while open. Off by default, so the page keeps its scroll.
`[(open)]`	`boolean`	`false`	Whether the menu is open.

`GlassMenuTrigger`

[glassMenuTrigger]

Input	Type	Default	Description
`disabled`	`boolean`	`false`	Stops the menu from opening.

`GlassMenuContent`

glass-menu-content

Input	Type	Default	Description
`sideOffset`	`number`	`8`	Gap in pixels between the trigger and the menu.
`side / align`	`'top' \| 'right' \| 'bottom' \| 'left' / 'start' \| 'center' \| 'end'`	`'bottom' / 'center'`	Preferred placement; it flips to stay on screen.
`alignOffset / avoidCollisions / collisionPadding / sticky / hideWhenDetached`	`number / boolean / number / 'partial' \| 'always' / boolean`	`0 / true / 0 / 'partial' / false`	Fine placement: offsets, collision padding and sticking to the anchor.
`thickness`	`number`	thickness preference	Glass thickness as a multiple of regular (1); thicker glass bends the backdrop further at the rim.

`GlassMenuItem`

glass-menu-item, [glassMenuItem]

Input	Type	Default	Description
`tone`	`'default' \| 'destructive'`	`'default'`	destructive colours the item for actions such as Delete.
`inset`	`boolean`	`false`	Indents the label to line up with checkbox and radio items.
`(select)`	`Event`	None	Fires when the item is chosen by click or keyboard; preventDefault() keeps the menu open.
`disabled / textValue`	`boolean / string`	false / its text	Every item takes these.

`GlassMenuCheckboxItem`

glass-menu-checkbox-item

Input	Type	Default	Description
`[(checked)]`	`boolean \| 'indeterminate'`	`false`	Whether the check shows; choosing the item toggles it.

`GlassMenuRadioGroup`

glass-menu-radio-group

Input	Type	Default	Description
`[(value)]`	`string`	None	The selected item's value.

`GlassMenuRadioItem`

glass-menu-radio-item

Input	Type	Default	Description
`value`	`string`	required	The value this item selects in its radio group.

`GlassMenuGroup / GlassMenuLabel / GlassMenuSeparator / GlassMenuShortcut`

glass-menu-group, glass-menu-label, glass-menu-separator, glass-menu-shortcut

`GlassMenuSub / GlassMenuSubTrigger`

glass-menu-sub, glass-menu-sub-trigger

Input	Type	Default	Description
`[(open)] / inset`	`boolean / boolean`	`false / false`	The submenu's open state, and the trigger's indent.

`GlassMenuSubContent`

glass-menu-sub-content

Input	Type	Default	Description
`sideOffset`	`number`	`6`	Gap in pixels between the submenu and its trigger.
`alignOffset`	`number`	`-6`	Shifts the submenu along its trigger so the first item lines up.