Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmMenubarImports } from '@spartan-ng/helm/menubar';

@Component({
	selector: 'spartan-menubar-preview',
	imports: [HlmMenubarImports, HlmDropdownMenuImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-menubar>
			<button [hlmMenubarTrigger]="file">File</button>
			<button [hlmMenubarTrigger]="edit">Edit</button>
			<button [hlmMenubarTrigger]="view">View</button>
			<button [hlmMenubarTrigger]="profiles">Profiles</button>
		</hlm-menubar>

		<ng-template #file>
			<hlm-dropdown-menu sideOffset="2">
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						New Tab
						<hlm-dropdown-menu-shortcut>⌘T</hlm-dropdown-menu-shortcut>
					</button>
					<button hlmDropdownMenuItem>
						New Window
						<hlm-dropdown-menu-shortcut>⌘N</hlm-dropdown-menu-shortcut>
					</button>
					<button hlmDropdownMenuItem disabled>New Incognito Window</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem [hlmDropdownMenuSubTrigger]="share" align="start" side="right">
						Share
						<hlm-dropdown-menu-item-sub-indicator />
					</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						Print
						<hlm-dropdown-menu-shortcut>⌘P</hlm-dropdown-menu-shortcut>
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu>
		</ng-template>
		<ng-template #share>
			<hlm-dropdown-menu-sub>
				<button hlmDropdownMenuItem>Email link</button>
				<button hlmDropdownMenuItem>Messages</button>
				<button hlmDropdownMenuItem>Notes</button>
			</hlm-dropdown-menu-sub>
		</ng-template>

		<ng-template #edit>
			<hlm-dropdown-menu sideOffset="2" class="w-48">
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						Undo
						<hlm-dropdown-menu-shortcut>⌘Z</hlm-dropdown-menu-shortcut>
					</button>
					<button hlmDropdownMenuItem>
						Redo
						<hlm-dropdown-menu-shortcut>⇧⌘Z</hlm-dropdown-menu-shortcut>
					</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem [hlmDropdownMenuSubTrigger]="find" align="start" side="right">
						Find
						<hlm-dropdown-menu-item-sub-indicator />
					</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Cut</button>
				<button hlmDropdownMenuItem>Copy</button>
				<button hlmDropdownMenuItem>Paste</button>
			</hlm-dropdown-menu>
		</ng-template>
		<ng-template #find>
			<hlm-dropdown-menu-sub>
				<button hlmDropdownMenuItem>Search the web</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Find...</button>
				<button hlmDropdownMenuItem>Find Next</button>
				<button hlmDropdownMenuItem>Find Previous</button>
			</hlm-dropdown-menu-sub>
		</ng-template>

		<ng-template #view>
			<hlm-dropdown-menu sideOffset="2">
				<button hlmDropdownMenuCheckbox>
					Bookmarks Bar
					<hlm-dropdown-menu-checkbox-indicator />
				</button>
				<button hlmDropdownMenuCheckbox checked>
					Full URLs
					<hlm-dropdown-menu-checkbox-indicator />
				</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>
					Reload
					<hlm-dropdown-menu-shortcut>⌘R</hlm-dropdown-menu-shortcut>
				</button>
				<button hlmDropdownMenuItem disabled>
					Force Reload
					<hlm-dropdown-menu-shortcut>⇧⌘R</hlm-dropdown-menu-shortcut>
				</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Toggle Fullscreen</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Hide Sidebar</button>
			</hlm-dropdown-menu>
		</ng-template>

		<ng-template #profiles>
			<hlm-dropdown-menu sideOffset="2" class="w-48">
				<button hlmDropdownMenuRadio>
					Andy
					<hlm-dropdown-menu-radio-indicator />
				</button>
				<button hlmDropdownMenuRadio checked>
					Benoit
					<hlm-dropdown-menu-radio-indicator />
				</button>
				<button hlmDropdownMenuRadio>
					Lewis
					<hlm-dropdown-menu-radio-indicator />
				</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Edit...</button>
				<hlm-dropdown-menu-separator />
				<button hlmDropdownMenuItem>Add Profile...</button>
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class MenubarPreview {}

About

Menubar is built with the help of Menu from Material CDK and Dropdown Menu .

Installation

ng g @spartan-ng/cli:ui menubar

nx g @spartan-ng/cli:ui menubar

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, makeEnvironmentProviders, runInInjectionContext, type EnvironmentProviders } from '@angular/core';
import { OVERLAY_DEFAULT_CONFIG } from '@angular/cdk/overlay';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { provideSpartanHlm } from '@spartan-ng/helm/utils';
import { twMerge } from 'tailwind-merge';

export function hlm(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs));
}

// Global map to track class managers per element
const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
// Global mutation observer for all elements
let globalObserver: MutationObserver | null = null;
const observedElements = new Set<HTMLElement>();

interface ElementClassManager {
	element: HTMLElement;
	sources: Map<number, { classes: Set<string>; order: number }>;
	baseClasses: Set<string>;
	isUpdating: boolean;
	nextOrder: number;
	hasInitialized: boolean;
	restoreRafId: number | null;
	/** Transitions are suppressed until the first effect writes correct classes */
	transitionsSuppressed: boolean;
	/** Original inline transition value to restore after suppression (empty string = none was set) */
	previousTransition: string;
	/** Original inline transition priority to preserve !important when restoring */
	previousTransitionPriority: string;
}

let sourceCounter = 0;

/**
 * This function dynamically adds and removes classes for a given element without requiring
 * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
 *
 * 1. This will merge the existing classes on the element with the new classes.
 * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
 * 3. Multiple calls to this function on the same element will be merged efficiently.
 */
export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
	runInInjectionContext(options.injector ?? inject(Injector), () => {
		const elementRef = options.elementRef ?? inject(ElementRef);
		const platformId = inject(PLATFORM_ID);
		const destroyRef = inject(DestroyRef);
		const baseClasses = inject(new HostAttributeToken('class'), { optional: true });

		const element = elementRef.nativeElement;

		// Create unique identifier for this source
		const sourceId = sourceCounter++;

		// Get or create the class manager for this element
		let manager = elementClassManagers.get(element);

		if (!manager) {
			// Initialize base classes from variation (host attribute 'class')
			const initialBaseClasses = new Set<string>();

			if (baseClasses) {
				toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
			}

			manager = {
				element,
				sources: new Map(),
				baseClasses: initialBaseClasses,
				isUpdating: false,
				nextOrder: 0,
				hasInitialized: false,
				restoreRafId: null,
				transitionsSuppressed: false,
				previousTransition: '',
				previousTransitionPriority: '',
			};
			elementClassManagers.set(element, manager);

			// Setup global observer if needed and register this element
			setupGlobalObserver(platformId);
			observedElements.add(element);

			// Suppress transitions until the first effect writes correct classes and
			// the browser has painted them. This prevents CSS transition animations
			// during hydration when classes change from SSR state to client state.
			if (isPlatformBrowser(platformId)) {
				manager.previousTransition = element.style.getPropertyValue('transition');
				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
				element.style.setProperty('transition', 'none', 'important');
				manager.transitionsSuppressed = true;
			}
		}

		// Assign order once at registration time
		const sourceOrder = manager.nextOrder++;

		function updateClasses(): void {
			// Get the new classes from the computed function
			const newClasses = toClassList(computed());

			// Update this source's classes, keeping the original order
			manager!.sources.set(sourceId, {
				classes: new Set(newClasses),
				order: sourceOrder,
			});

			// Update the element
			updateElement(manager!);

			// Re-enable transitions after the first effect writes correct classes.
			// Deferred to next animation frame so the browser paints the class change
			// with transitions disabled first, then re-enables them.
			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				manager!.restoreRafId = requestAnimationFrame(() => {
					manager!.restoreRafId = null;
					restoreTransitionSuppression(manager!);
				});
			}
		}

		// Register cleanup with DestroyRef
		destroyRef.onDestroy(() => {
			if (manager!.restoreRafId !== null) {
				cancelAnimationFrame(manager!.restoreRafId);
				manager!.restoreRafId = null;
			}

			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				restoreTransitionSuppression(manager!);
			}

			// Remove this source from the manager
			manager!.sources.delete(sourceId);

			// If no more sources, clean up the manager
			if (manager!.sources.size === 0) {
				cleanupManager(element);
			} else {
				// Update element without this source's classes
				updateElement(manager!);
			}
		});

		/**
		 * We need this effect to track changes to the computed classes. Ideally, we would use
		 * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
		 * effect which works in both browser and SSR.
		 */
		effect(updateClasses);
	});
}

function restoreTransitionSuppression(manager: ElementClassManager): void {
	const prev = manager.previousTransition;
	if (prev) {
		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
	} else {
		manager.element.style.removeProperty('transition');
	}
}

// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
function setupGlobalObserver(platformId: Object): void {
	if (isPlatformBrowser(platformId) && !globalObserver) {
		// Create single global observer that watches the entire document
		globalObserver = new MutationObserver((mutations) => {
			for (const mutation of mutations) {
				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
					const element = mutation.target as HTMLElement;
					const manager = elementClassManagers.get(element);

					// Only process elements we're managing
					if (manager && observedElements.has(element)) {
						if (manager.isUpdating) continue; // Ignore changes we're making

						// Update base classes to include any externally added classes
						const currentClasses = toClassList(element.className);
						const allSourceClasses = new Set<string>();

						// Collect all classes from all sources
						for (const source of manager.sources.values()) {
							for (const className of source.classes) {
								allSourceClasses.add(className);
							}
						}

						// Any classes not from sources become new base classes
						manager.baseClasses.clear();

						for (const className of currentClasses) {
							if (!allSourceClasses.has(className)) {
								manager.baseClasses.add(className);
							}
						}

						updateElement(manager);
					}
				}
			}
		});

		// Start observing the entire document for class attribute changes
		globalObserver.observe(document, {
			attributes: true,
			attributeFilter: ['class'],
			subtree: true, // Watch all descendants
		});
	}
}

function updateElement(manager: ElementClassManager): void {
	if (manager.isUpdating) return; // Prevent recursive updates

	manager.isUpdating = true;

	// Handle initialization: capture base classes after first source registration
	if (!manager.hasInitialized && manager.sources.size > 0) {
		// Get current classes on element (may include SSR classes)
		const currentClasses = toClassList(manager.element.className);

		// Get all classes that will be applied by sources
		const allSourceClasses = new Set<string>();
		for (const source of manager.sources.values()) {
			source.classes.forEach((className) => allSourceClasses.add(className));
		}

		// Only consider classes as "base" if they're not produced by any source
		// This prevents SSR-rendered classes from being preserved as base classes
		currentClasses.forEach((className) => {
			if (!allSourceClasses.has(className)) {
				manager.baseClasses.add(className);
			}
		});

		manager.hasInitialized = true;
	}

	// Get classes from all sources, sorted by registration order (later takes precedence)
	const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);

	const allSourceClasses: string[] = [];
	for (const [, source] of sortedSources) {
		allSourceClasses.push(...source.classes);
	}

	// Combine base classes with all source classes, ensuring base classes take precedence
	const classesToApply =
		allSourceClasses.length > 0 || manager.baseClasses.size > 0
			? hlm([...allSourceClasses, ...manager.baseClasses])
			: '';

	// Apply the classes to the element
	if (manager.element.className !== classesToApply) {
		manager.element.className = classesToApply;
	}

	manager.isUpdating = false;
}

function cleanupManager(element: HTMLElement): void {
	// Remove from global tracking
	observedElements.delete(element);
	elementClassManagers.delete(element);

	// If no more elements being tracked, cleanup global observer
	if (observedElements.size === 0 && globalObserver) {
		globalObserver.disconnect();
		globalObserver = null;
	}
}

interface ClassesOptions {
	elementRef?: ElementRef<HTMLElement>;
	injector?: Injector;
}

// Cache for parsed class lists to avoid repeated string operations
const classListCache = new Map<string, string[]>();

function toClassList(className: string | ClassValue[]): string[] {
	// For simple string inputs, use cache to avoid repeated parsing
	if (typeof className === 'string' && classListCache.has(className)) {
		return classListCache.get(className)!;
	}

	const result = clsx(className)
		.split(' ')
		.filter((c) => c.length > 0);

	// Cache string results, but limit cache size to prevent memory growth
	if (typeof className === 'string' && classListCache.size < 1000) {
		classListCache.set(className, result);
	}

	return result;
}

/**
 * Provides default configuration for Spartan Helm components.
 *
 * This utility configures the Angular CDK overlay to disable the `usePopover`
 * behavior introduced in Angular 21, which causes CDK overlay-based components
 * (sheets, dialogs, tooltips, etc.) to render above `position: fixed` elements
 * like `<hlm-toaster>`.
 *
 * @returns {EnvironmentProviders} Environment providers to be added to the application config.
 *
 * @example
 * ```ts
 * // app.config.ts
 * 
 *
 * export const appConfig: ApplicationConfig = {
 *   providers: [
 *     provideSpartanHlm(),
 *     // ... other providers
 *   ],
 * };
 * ```
 */
export function provideSpartanHlm(): EnvironmentProviders {
	return makeEnvironmentProviders([
		{
			provide: OVERLAY_DEFAULT_CONFIG,
			useValue: { usePopover: false },
		},
	]);
}

import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
import { Directive, InjectionToken, booleanAttribute, computed, effect, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { type BooleanInput } from '@angular/cdk/coercion';

export interface HlmMenubarConfig {
	align: MenuAlign;
	side: MenuSide;
}

const defaultConfig: HlmMenubarConfig = {
	align: 'start',
	side: 'bottom',
};

const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');

export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
	return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmMenubarConfig(): HlmMenubarConfig {
	return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
}

@Directive({
	selector: 'button[hlmMenubarTrigger]',
	hostDirectives: [
		{
			directive: CdkMenuItem,
			inputs: ['cdkMenuItemDisabled: disabled'],
		},
		{
			directive: CdkMenuTrigger,
			inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
		},
	],
	host: {
		'data-slot': 'menubar-trigger',
		'[disabled]': 'disabled() ',
		'[attr.data-disabled]': 'disabled() ? "" : null',
	},
})
export class HlmMenubarTrigger {
	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
	private readonly _config = injectHlmMenubarConfig();

	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly align = input<MenuAlign>(this._config.align);
	public readonly side = input<MenuSide>(this._config.side);

	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));

	constructor() {
		// once the trigger opens we wait until the next tick and then grab the last position
		// used to position the menu. we store this in our trigger which the brnMenu directive has
		// access to through DI
		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
			setTimeout(
				() =>
					// eslint-disable-next-line
					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
			),
		);

		effect(() => {
			this._cdkTrigger.menuPosition = this._menuPosition();
		});

		classes(
			() =>
				'hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
		);
	}
}

@Directive({
	selector: '[hlmMenubar],hlm-menubar',
	hostDirectives: [CdkMenuBar],
	host: {
		'data-slot': 'menubar',
	},
})
export class HlmMenubar {
	constructor() {
		classes(() => 'bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center');
	}
}

export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
import { Directive, InjectionToken, booleanAttribute, computed, effect, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { type BooleanInput } from '@angular/cdk/coercion';

export interface HlmMenubarConfig {
	align: MenuAlign;
	side: MenuSide;
}

const defaultConfig: HlmMenubarConfig = {
	align: 'start',
	side: 'bottom',
};

const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');

export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
	return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmMenubarConfig(): HlmMenubarConfig {
	return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
}

@Directive({
	selector: 'button[hlmMenubarTrigger]',
	hostDirectives: [
		{
			directive: CdkMenuItem,
			inputs: ['cdkMenuItemDisabled: disabled'],
		},
		{
			directive: CdkMenuTrigger,
			inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
		},
	],
	host: {
		'data-slot': 'menubar-trigger',
		'[disabled]': 'disabled() ',
		'[attr.data-disabled]': 'disabled() ? "" : null',
	},
})
export class HlmMenubarTrigger {
	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
	private readonly _config = injectHlmMenubarConfig();

	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly align = input<MenuAlign>(this._config.align);
	public readonly side = input<MenuSide>(this._config.side);

	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));

	constructor() {
		// once the trigger opens we wait until the next tick and then grab the last position
		// used to position the menu. we store this in our trigger which the brnMenu directive has
		// access to through DI
		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
			setTimeout(
				() =>
					// eslint-disable-next-line
					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
			),
		);

		effect(() => {
			this._cdkTrigger.menuPosition = this._menuPosition();
		});

		classes(
			() =>
				'hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
		);
	}
}

@Directive({
	selector: '[hlmMenubar],hlm-menubar',
	hostDirectives: [CdkMenuBar],
	host: {
		'data-slot': 'menubar',
	},
})
export class HlmMenubar {
	constructor() {
		classes(() => 'bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center');
	}
}

export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
import { Directive, InjectionToken, booleanAttribute, computed, effect, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { type BooleanInput } from '@angular/cdk/coercion';

export interface HlmMenubarConfig {
	align: MenuAlign;
	side: MenuSide;
}

const defaultConfig: HlmMenubarConfig = {
	align: 'start',
	side: 'bottom',
};

const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');

export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
	return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmMenubarConfig(): HlmMenubarConfig {
	return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
}

@Directive({
	selector: 'button[hlmMenubarTrigger]',
	hostDirectives: [
		{
			directive: CdkMenuItem,
			inputs: ['cdkMenuItemDisabled: disabled'],
		},
		{
			directive: CdkMenuTrigger,
			inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
		},
	],
	host: {
		'data-slot': 'menubar-trigger',
		'[disabled]': 'disabled() ',
		'[attr.data-disabled]': 'disabled() ? "" : null',
	},
})
export class HlmMenubarTrigger {
	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
	private readonly _config = injectHlmMenubarConfig();

	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly align = input<MenuAlign>(this._config.align);
	public readonly side = input<MenuSide>(this._config.side);

	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));

	constructor() {
		// once the trigger opens we wait until the next tick and then grab the last position
		// used to position the menu. we store this in our trigger which the brnMenu directive has
		// access to through DI
		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
			setTimeout(
				() =>
					// eslint-disable-next-line
					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
			),
		);

		effect(() => {
			this._cdkTrigger.menuPosition = this._menuPosition();
		});

		classes(
			() =>
				'hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
		);
	}
}

@Directive({
	selector: '[hlmMenubar],hlm-menubar',
	hostDirectives: [CdkMenuBar],
	host: {
		'data-slot': 'menubar',
	},
})
export class HlmMenubar {
	constructor() {
		classes(() => 'bg-background h-9 rounded-2xl border p-1 flex items-center');
	}
}

export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
import { Directive, InjectionToken, booleanAttribute, computed, effect, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { type BooleanInput } from '@angular/cdk/coercion';

export interface HlmMenubarConfig {
	align: MenuAlign;
	side: MenuSide;
}

const defaultConfig: HlmMenubarConfig = {
	align: 'start',
	side: 'bottom',
};

const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');

export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
	return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmMenubarConfig(): HlmMenubarConfig {
	return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
}

@Directive({
	selector: 'button[hlmMenubarTrigger]',
	hostDirectives: [
		{
			directive: CdkMenuItem,
			inputs: ['cdkMenuItemDisabled: disabled'],
		},
		{
			directive: CdkMenuTrigger,
			inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
		},
	],
	host: {
		'data-slot': 'menubar-trigger',
		'[disabled]': 'disabled() ',
		'[attr.data-disabled]': 'disabled() ? "" : null',
	},
})
export class HlmMenubarTrigger {
	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
	private readonly _config = injectHlmMenubarConfig();

	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly align = input<MenuAlign>(this._config.align);
	public readonly side = input<MenuSide>(this._config.side);

	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));

	constructor() {
		// once the trigger opens we wait until the next tick and then grab the last position
		// used to position the menu. we store this in our trigger which the brnMenu directive has
		// access to through DI
		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
			setTimeout(
				() =>
					// eslint-disable-next-line
					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
			),
		);

		effect(() => {
			this._cdkTrigger.menuPosition = this._menuPosition();
		});

		classes(
			() =>
				'hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
		);
	}
}

@Directive({
	selector: '[hlmMenubar],hlm-menubar',
	hostDirectives: [CdkMenuBar],
	host: {
		'data-slot': 'menubar',
	},
})
export class HlmMenubar {
	constructor() {
		classes(() => 'bg-background h-9 rounded-lg border p-1 flex items-center');
	}
}

export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
import { Directive, InjectionToken, booleanAttribute, computed, effect, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { type BooleanInput } from '@angular/cdk/coercion';

export interface HlmMenubarConfig {
	align: MenuAlign;
	side: MenuSide;
}

const defaultConfig: HlmMenubarConfig = {
	align: 'start',
	side: 'bottom',
};

const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');

export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
	return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmMenubarConfig(): HlmMenubarConfig {
	return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
}

@Directive({
	selector: 'button[hlmMenubarTrigger]',
	hostDirectives: [
		{
			directive: CdkMenuItem,
			inputs: ['cdkMenuItemDisabled: disabled'],
		},
		{
			directive: CdkMenuTrigger,
			inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
		},
	],
	host: {
		'data-slot': 'menubar-trigger',
		'[disabled]': 'disabled() ',
		'[attr.data-disabled]': 'disabled() ? "" : null',
	},
})
export class HlmMenubarTrigger {
	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
	private readonly _config = injectHlmMenubarConfig();

	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly align = input<MenuAlign>(this._config.align);
	public readonly side = input<MenuSide>(this._config.side);

	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));

	constructor() {
		// once the trigger opens we wait until the next tick and then grab the last position
		// used to position the menu. we store this in our trigger which the brnMenu directive has
		// access to through DI
		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
			setTimeout(
				() =>
					// eslint-disable-next-line
					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
			),
		);

		effect(() => {
			this._cdkTrigger.menuPosition = this._menuPosition();
		});

		classes(
			() =>
				'hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
		);
	}
}

@Directive({
	selector: '[hlmMenubar],hlm-menubar',
	hostDirectives: [CdkMenuBar],
	host: {
		'data-slot': 'menubar',
	},
})
export class HlmMenubar {
	constructor() {
		classes(() => 'bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center');
	}
}

export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';
import { Directive, InjectionToken, booleanAttribute, computed, effect, inject, input, type ValueProvider } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';
import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { type BooleanInput } from '@angular/cdk/coercion';

export interface HlmMenubarConfig {
	align: MenuAlign;
	side: MenuSide;
}

const defaultConfig: HlmMenubarConfig = {
	align: 'start',
	side: 'bottom',
};

const HlmMenubarConfigToken = new InjectionToken<HlmMenubarConfig>('HlmMenubarConfig');

export function provideHlmMenubarConfig(config: Partial<HlmMenubarConfig>): ValueProvider {
	return { provide: HlmMenubarConfigToken, useValue: { ...defaultConfig, ...config } };
}

export function injectHlmMenubarConfig(): HlmMenubarConfig {
	return inject(HlmMenubarConfigToken, { optional: true }) ?? defaultConfig;
}

@Directive({
	selector: 'button[hlmMenubarTrigger]',
	hostDirectives: [
		{
			directive: CdkMenuItem,
			inputs: ['cdkMenuItemDisabled: disabled'],
		},
		{
			directive: CdkMenuTrigger,
			inputs: ['cdkMenuTriggerFor: hlmMenubarTrigger', 'cdkMenuTriggerData: hlmMenubarTriggerData'],
			outputs: ['cdkMenuOpened: hlmDropdownMenuOpened', 'cdkMenuClosed: hlmDropdownMenuClosed'],
		},
	],
	host: {
		'data-slot': 'menubar-trigger',
		'[disabled]': 'disabled() ',
		'[attr.data-disabled]': 'disabled() ? "" : null',
	},
})
export class HlmMenubarTrigger {
	private readonly _cdkTrigger = inject(CdkMenuTrigger, { host: true });
	private readonly _config = injectHlmMenubarConfig();

	public readonly disabled = input<boolean, BooleanInput>(false, { transform: booleanAttribute });

	public readonly align = input<MenuAlign>(this._config.align);
	public readonly side = input<MenuSide>(this._config.side);

	private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));

	constructor() {
		// once the trigger opens we wait until the next tick and then grab the last position
		// used to position the menu. we store this in our trigger which the brnMenu directive has
		// access to through DI
		this._cdkTrigger.opened.pipe(takeUntilDestroyed()).subscribe(() =>
			setTimeout(
				() =>
					// eslint-disable-next-line
					((this._cdkTrigger as any)._spartanLastPosition = // eslint-disable-next-line
						(this._cdkTrigger as any).overlayRef._positionStrategy._lastPosition),
			),
		);

		effect(() => {
			this._cdkTrigger.menuPosition = this._menuPosition();
		});

		classes(
			() =>
				'hover:bg-muted aria-expanded:bg-muted rounded-2xl px-2 py-0.75 text-sm font-medium flex items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
		);
	}
}

@Directive({
	selector: '[hlmMenubar],hlm-menubar',
	hostDirectives: [CdkMenuBar],
	host: {
		'data-slot': 'menubar',
	},
})
export class HlmMenubar {
	constructor() {
		classes(() => 'h-9 rounded-3xl border p-1 flex items-center');
	}
}

export const HlmMenubarImports = [HlmMenubar, HlmMenubarTrigger] as const;

Usage

import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmMenubarImports } from '@spartan-ng/helm/menubar';

<hlm-menubar>
  <button [hlmMenubarTrigger]="file">File</button>
</hlm-menubar>

<ng-template #file>
  <hlm-dropdown-menu sideOffset="2">
    <button hlmDropdownMenuItem>
      New Tab
      <hlm-dropdown-menu-shortcut>⌘</hlm-dropdown-menu-shortcut>
    </button>
    <button hlmDropdownMenuItem>New Window</button>
    <hlm-dropdown-menu-separator />
    <button hlmDropdownMenuItem>Share</button>
    <hlm-dropdown-menu-separator />
    <button hlmDropdownMenuItem>Print</button>
  </hlm-dropdown-menu>
</ng-template>

Examples

Icons

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideFile, lucideFolder, lucideHelpCircle, lucideSave, lucideSettings, lucideTrash } from '@ng-icons/lucide';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmMenubarImports } from '@spartan-ng/helm/menubar';

@Component({
	selector: 'spartan-menubar-icons',
	imports: [HlmMenubarImports, HlmDropdownMenuImports, NgIcon],
	providers: [provideIcons({ lucideFile, lucideFolder, lucideSave, lucideSettings, lucideHelpCircle, lucideTrash })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-menubar>
			<button [hlmMenubarTrigger]="file">File</button>
			<button [hlmMenubarTrigger]="more">More</button>
		</hlm-menubar>

		<ng-template #file>
			<hlm-dropdown-menu sideOffset="2" class="w-48">
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						<ng-icon name="lucideFile" />
						New File
						<hlm-dropdown-menu-shortcut>⌘N</hlm-dropdown-menu-shortcut>
					</button>
					<button hlmDropdownMenuItem>
						<ng-icon name="lucideFolder" />
						Open Folder
					</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						<ng-icon name="lucideSave" />
						Save
						<hlm-dropdown-menu-shortcut>⌘S</hlm-dropdown-menu-shortcut>
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu>
		</ng-template>

		<ng-template #more>
			<hlm-dropdown-menu sideOffset="2">
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						<ng-icon name="lucideSettings" />
						Settings
					</button>
					<button hlmDropdownMenuItem>
						<ng-icon name="lucideHelpCircle" />
						Help
					</button>
				</hlm-dropdown-menu-group>
				<hlm-dropdown-menu-separator />
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem variant="destructive">
						<ng-icon name="lucideTrash" />
						Delete
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class MenubarIcons {}

RTL

To enable RTL support in spartan-ng, see the RTL configuration guide.

import { Directionality } from '@angular/cdk/bidi';
import { Component, computed, effect, inject, signal, untracked } from '@angular/core';
import { TranslateService, Translations } from '@spartan-ng/app/app/shared/translate.service';
import { HlmDropdownMenuImports } from '@spartan-ng/helm/dropdown-menu';
import { HlmMenubarImports } from '@spartan-ng/helm/menubar';

@Component({
	selector: 'spartan-menubar-rtl',
	imports: [HlmMenubarImports, HlmDropdownMenuImports],
	providers: [Directionality],
	host: {
		'[dir]': '_dir()',
	},
	template: `
		<hlm-menubar>
			<button [hlmMenubarTrigger]="file">
				{{ _t()['file'] }}
			</button>

			<button [hlmMenubarTrigger]="edit">
				{{ _t()['edit'] }}
			</button>

			<button [hlmMenubarTrigger]="view">
				{{ _t()['view'] }}
			</button>

			<button [hlmMenubarTrigger]="profiles">
				{{ _t()['profiles'] }}
			</button>
		</hlm-menubar>

		<!-- FILE -->

		<ng-template #file>
			<hlm-dropdown-menu sideOffset="2">
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['newTab'] }}
						<hlm-dropdown-menu-shortcut>⌘T</hlm-dropdown-menu-shortcut>
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['newWindow'] }}
						<hlm-dropdown-menu-shortcut>⌘N</hlm-dropdown-menu-shortcut>
					</button>

					<button hlmDropdownMenuItem disabled>
						{{ _t()['newIncognitoWindow'] }}
					</button>
				</hlm-dropdown-menu-group>

				<hlm-dropdown-menu-separator />

				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem [hlmDropdownMenuSubTrigger]="share" align="start" side="right">
						{{ _t()['share'] }}
						<hlm-dropdown-menu-item-sub-indicator />
					</button>
				</hlm-dropdown-menu-group>

				<hlm-dropdown-menu-separator />

				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['print'] }}
						<hlm-dropdown-menu-shortcut>⌘P</hlm-dropdown-menu-shortcut>
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu>
		</ng-template>

		<!-- SHARE SUBMENU -->

		<ng-template #share>
			<hlm-dropdown-menu-sub>
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['emailLink'] }}
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['messages'] }}
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['notes'] }}
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu-sub>
		</ng-template>

		<!-- EDIT -->

		<ng-template #edit>
			<hlm-dropdown-menu sideOffset="2" class="w-56">
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['undo'] }}
						<hlm-dropdown-menu-shortcut>⌘Z</hlm-dropdown-menu-shortcut>
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['redo'] }}
						<hlm-dropdown-menu-shortcut>⇧⌘Z</hlm-dropdown-menu-shortcut>
					</button>
				</hlm-dropdown-menu-group>

				<hlm-dropdown-menu-separator />

				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem [hlmDropdownMenuSubTrigger]="find" align="start" side="right">
						{{ _t()['find'] }}
						<hlm-dropdown-menu-item-sub-indicator />
					</button>
				</hlm-dropdown-menu-group>

				<hlm-dropdown-menu-separator />

				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['cut'] }}
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['copy'] }}
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['paste'] }}
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu>
		</ng-template>

		<!-- FIND SUBMENU -->

		<ng-template #find>
			<hlm-dropdown-menu-sub>
				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['searchTheWeb'] }}
					</button>
				</hlm-dropdown-menu-group>

				<hlm-dropdown-menu-separator />

				<hlm-dropdown-menu-group>
					<button hlmDropdownMenuItem>
						{{ _t()['findItem'] }}
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['findNext'] }}
					</button>

					<button hlmDropdownMenuItem>
						{{ _t()['findPrevious'] }}
					</button>
				</hlm-dropdown-menu-group>
			</hlm-dropdown-menu-sub>
		</ng-template>

		<!-- VIEW -->

		<ng-template #view>
			<hlm-dropdown-menu sideOffset="2" class="w-64">
				<button hlmDropdownMenuCheckbox>
					<hlm-dropdown-menu-checkbox-indicator />
					{{ _t()['bookmarksBar'] }}
				</button>

				<button hlmDropdownMenuCheckbox checked>
					<hlm-dropdown-menu-checkbox-indicator />
					{{ _t()['fullUrls'] }}
				</button>

				<hlm-dropdown-menu-separator />

				<button hlmDropdownMenuItem>
					{{ _t()['reload'] }}
					<hlm-dropdown-menu-shortcut>⌘R</hlm-dropdown-menu-shortcut>
				</button>

				<button hlmDropdownMenuItem disabled>
					{{ _t()['forceReload'] }}
					<hlm-dropdown-menu-shortcut>⇧⌘R</hlm-dropdown-menu-shortcut>
				</button>

				<hlm-dropdown-menu-separator />

				<button hlmDropdownMenuItem>
					{{ _t()['toggleFullscreen'] }}
				</button>

				<hlm-dropdown-menu-separator />

				<button hlmDropdownMenuItem>
					{{ _t()['hideSidebar'] }}
				</button>
			</hlm-dropdown-menu>
		</ng-template>

		<!-- PROFILES -->

		<ng-template #profiles>
			<hlm-dropdown-menu sideOffset="2" class="w-48">
				<button hlmDropdownMenuRadio [checked]="_profile() === 'andy'" (click)="_profile.set('andy')">
					<hlm-dropdown-menu-radio-indicator />
					{{ _t()['andy'] }}
				</button>

				<button hlmDropdownMenuRadio [checked]="_profile() === 'benoit'" (click)="_profile.set('benoit')">
					<hlm-dropdown-menu-radio-indicator />
					{{ _t()['benoit'] }}
				</button>

				<button hlmDropdownMenuRadio [checked]="_profile() === 'luis'" (click)="_profile.set('luis')">
					<hlm-dropdown-menu-radio-indicator />
					{{ _t()['luis'] }}
				</button>

				<hlm-dropdown-menu-separator />

				<button hlmDropdownMenuItem>
					{{ _t()['editProfile'] }}
				</button>

				<hlm-dropdown-menu-separator />

				<button hlmDropdownMenuItem>
					{{ _t()['addProfile'] }}
				</button>
			</hlm-dropdown-menu>
		</ng-template>
	`,
})
export class MenubarRtl {
	private readonly _language = inject(TranslateService).language;

	private readonly _translations: Translations = {
		en: {
			dir: 'ltr',
			values: {
				file: 'File',
				newTab: 'New Tab',
				newWindow: 'New Window',
				newIncognitoWindow: 'New Incognito Window',
				share: 'Share',
				emailLink: 'Email link',
				messages: 'Messages',
				notes: 'Notes',
				print: 'Print...',
				edit: 'Edit',
				undo: 'Undo',
				redo: 'Redo',
				find: 'Find',
				searchTheWeb: 'Search the web',
				findItem: 'Find...',
				findNext: 'Find Next',
				findPrevious: 'Find Previous',
				cut: 'Cut',
				copy: 'Copy',
				paste: 'Paste',
				view: 'View',
				bookmarksBar: 'Bookmarks Bar',
				fullUrls: 'Full URLs',
				reload: 'Reload',
				forceReload: 'Force Reload',
				toggleFullscreen: 'Toggle Fullscreen',
				hideSidebar: 'Hide Sidebar',
				profiles: 'Profiles',
				andy: 'Andy',
				benoit: 'Benoit',
				luis: 'Luis',
				editProfile: 'Edit...',
				addProfile: 'Add Profile...',
			},
		},
		ar: {
			dir: 'rtl',
			values: {
				file: 'ملف',
				newTab: 'علامة تبويب جديدة',
				newWindow: 'نافذة جديدة',
				newIncognitoWindow: 'نافذة التصفح المتخفي الجديدة',
				share: 'مشاركة',
				emailLink: 'رابط البريد الإلكتروني',
				messages: 'الرسائل',
				notes: 'الملاحظات',
				print: 'طباعة...',
				edit: 'تعديل',
				undo: 'تراجع',
				redo: 'إعادة',
				find: 'بحث',
				searchTheWeb: 'البحث على الويب',
				findItem: 'بحث...',
				findNext: 'البحث التالي',
				findPrevious: 'البحث السابق',
				cut: 'قص',
				copy: 'نسخ',
				paste: 'لصق',
				view: 'عرض',
				bookmarksBar: 'شريط الإشارات المرجعية',
				fullUrls: 'عناوين URL الكاملة',
				reload: 'إعادة تحميل',
				forceReload: 'إعادة تحميل قسري',
				toggleFullscreen: 'تبديل وضع ملء الشاشة',
				hideSidebar: 'إخفاء الشريط الجانبي',
				profiles: 'الملفات الشخصية',
				andy: 'Andy',
				benoit: 'Benoit',
				luis: 'Luis',
				editProfile: 'تعديل...',
				addProfile: 'إضافة ملف شخصي...',
			},
		},
		he: {
			dir: 'rtl',
			values: {
				file: 'קובץ',
				newTab: 'כרטיסייה חדשה',
				newWindow: 'חלון חדש',
				newIncognitoWindow: 'חלון גלישה בסתר חדש',
				share: 'שתף',
				emailLink: 'קישור אימייל',
				messages: 'הודעות',
				notes: 'הערות',
				print: 'הדפס...',
				edit: 'ערוך',
				undo: 'בטל',
				redo: 'בצע שוב',
				find: 'מצא',
				searchTheWeb: 'חפש באינטרנט',
				findItem: 'מצא...',
				findNext: 'מצא הבא',
				findPrevious: 'מצא הקודם',
				cut: 'גזור',
				copy: 'העתק',
				paste: 'הדבק',
				view: 'תצוגה',
				bookmarksBar: 'סרגל סימניות',
				fullUrls: 'כתובות URL מלאות',
				reload: 'רענן',
				forceReload: 'רענן בכוח',
				toggleFullscreen: 'החלף מסך מלא',
				hideSidebar: 'הסתר סרגל צד',
				profiles: 'פרופילים',
				andy: 'Andy',
				benoit: 'Benoit',
				luis: 'Luis',
				editProfile: 'ערוך...',
				addProfile: 'הוסף פרופיל...',
			},
		},
	};

	private readonly _translation = computed(() => this._translations[this._language()]);
	protected readonly _t = computed(() => this._translation().values);
	protected readonly _dir = computed(() => this._translation().dir);
	protected readonly _profile = signal('benoit');

	private readonly _directionality = inject(Directionality);

	constructor() {
		effect(() => {
			const dir = this._dir();
			untracked(() => this._directionality.valueSignal.set(dir));
		});
	}
}

Helm API

HlmMenubarTrigger

Selector: button[hlmMenubarTrigger]

Inputs

Prop	Type	Default	Description
disabled	boolean	false	-
align	MenuAlign	this._config.align	-
side	MenuSide	this._config.side	-

HlmMenubar

Selector: [hlmMenubar],hlm-menubar

Native Select

Label

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.