Getting StartedOwnable model, workflow, and first local install 2
LayoutInstallable layout wrappers with local source ownership 6
OverlayInstallable overlay wrappers with local source ownership 3
FeedbackInstallable feedback wrappers with local source ownership 5
FormInstallable form components 11
UtilityInstallable utility wrappers with local source ownership 6
NavigationInstallable navigation components 6
ToolingCLI and registry contracts 2
ReleasePublishing and workflow structure for the ownable surface 1

Context Menu

The ownable Context Menu install gives your app a local wrapper around the shared primitive behavior so you can shape panel markup, placement strategy, and action presentation near the product flows that need it.

Why own Context Menu locally

Context menus often need product-specific target affordances, pointer placement logic, and command copy that drift quickly from generic defaults. Owning the wrapper locally makes that iteration much easier.

  • Customize right-click target shells and panel placement without forking primitives.
  • Keep action wording and destructive-state treatments inside the product repo.
  • Review context-menu behavior and markup next to the surfaces that invoke it.

What the install includes

The registry-backed context-menu install writes a local wrapper component, template, styles, and export barrel under your app so you can tune the owned surface without losing the shared interaction contract.

Ownable Install

Install Context Menu from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm

bash
pnpm dlx tailng add context-menu

Generated files

The command scaffolds local files under src/app/tailng-ui/context-menu.

  • src/app/tailng-ui/context-menu/tng-context-menu-primitive.ts
  • src/app/tailng-ui/context-menu/tng-context-menu.ts
  • src/app/tailng-ui/context-menu/tng-context-menu.html
  • src/app/tailng-ui/context-menu/tng-context-menu.css
  • src/app/tailng-ui/context-menu/index.ts

Import in your feature module/component

Imports

ts
import { TngContextMenu, TngContextMenuPrimitive } from './tailng-ui/context-menu';

Usage

Template usage

html
<div class="context-menu-shell context-menu-shell--anchored">
  <div tabindex="0" [tngContextMenuTrigger]="assetMenu">Right-click target</div>
  <tng-context-menu #assetMenu="tngContextMenu" ariaLabel="Asset actions">
    <button type="button" tngMenuItem tngMenuItemValue="Rename">Rename</button>
    <button type="button" tngMenuItem tngMenuItemValue="Archive">Archive</button>
  </tng-context-menu>
</div>