Menubar

The ownable Menubar install gives your app a local command-strip wrapper you can reshape for app chrome, platform conventions, and product-specific top-level actions while keeping the shared keyboard and menu behavior underneath.

Why own Menubar locally

Menubars usually end up tightly coupled to workspace navigation, action grouping, and shell styling. Local ownership makes it easier to ship those product-level changes without waiting on a shared package update.

Rework top-level command grouping and chrome integration for your app shell.
Keep menu labels, icons, and default actions close to the workspace code.
Iterate on wrapper styling while preserving the underlying keyboard contract.

What the install includes

The registry-backed menubar install writes the local wrapper component, template, styles, and export barrel under your app so command surfaces can evolve together with the rest of your navigation shell.

Ownable Install

Install Menubar 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 dlx tailng add menubar

npx tailng add menubar

Generated files

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

src/app/tailng-ui/menubar/tng-menubar-primitive.ts
src/app/tailng-ui/menubar/tng-menubar.ts
src/app/tailng-ui/menubar/tng-menubar.html
src/app/tailng-ui/menubar/tng-menubar.css
src/app/tailng-ui/menubar/index.ts

Import in your feature module/component

import { TngMenubar, TngMenubarPrimitive } from './tailng-ui/menubar';

Usage

<tng-menubar ariaLabel="Workspace commands">
  <div tngMenubarGroup>
    <tng-menu #fileMenu="tngMenu" ariaLabel="File menu">
      <button type="button" tngMenuItem tngMenuItemValue="New">New</button>
      <button type="button" tngMenuItem tngMenuItemValue="Open">Open</button>
    </tng-menu>
    <button type="button" tngMenubarItem [tngMenubarMenu]="fileMenu">File</button>
  </div>
</tng-menubar>