### Project Setup Commands (Bash)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Provides essential bash commands for setting up the development environment, including cloning the repository, restoring .NET packages, and installing npm packages.

```bash
# Clone repository
git clone https://github.com/AaronSadlerUK/Umbraco.Community.UmbNav.git
cd Umbraco.Community.UmbNav

# Restore .NET packages
dotnet restore

# Install npm packages
cd Umbraco.Community.UmbNav
npm install
```

--------------------------------

### Install UmbNav Core Package (Headless)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/README.md

Use this command for headless or API-only Umbraco scenarios to install the core package without the UI.

```bash
dotnet add package Umbraco.Community.UmbNav.Core
```

--------------------------------

### Install UmbNav Package

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/README.md

Use this command to add the main UmbNav package to your Umbraco project.

```bash
dotnet add package Umbraco.Community.UmbNav
```

--------------------------------

### Integration Test Setup with Umbraco Services

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Demonstrates setting up an integration test using Umbraco's core services. Ensure you have the necessary Umbraco testing infrastructure in place.

```csharp
using Umbraco.Cms.Tests.Integration;
using Umbraco.Core.Services;
using NUnit.Framework;

public class UmbNavValueConverterIntegrationTests : UmbracoIntegrationTest
{
    [Test]
    public async Task ConvertValue_WithRealConfiguration_Works()
    {
        // Use real Umbraco services from GetRequiredService<T>()
        var converter = GetRequiredService<UmbNavValueConverter>();
        var dataTypeService = GetRequiredService<IDataTypeService>();

        // Create real data type with configuration
        // Test conversion with real infrastructure
    }
}
```

--------------------------------

### Integration Test Full Migration Workflow

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example test scenarios for the full migration workflow. These tests cover updating content and data types with legacy data.

```csharp
[Fact]
public async Task MigrateAsync_WithLegacyData_UpdatesContentAndDataTypes()
{
    // Setup test database with legacy content
    // Run migration
    // Verify all content updated, data types changed
}
```

```csharp
[Fact]
public void ProcessContentType_WithPaginatedContent_ProcessesAllPages()
{
    // Test with 250+ content items to verify pagination
}
```

--------------------------------

### UmbNav Configuration in appsettings.json

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example of how to configure UmbNav settings within the appsettings.json file. This snippet shows how to disable telemetry.

```json
{
  "UmbNav": {
    "DisableTelemetry": true
  }
}
```

--------------------------------

### Playwright E2E Test Example

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

An example of an End-to-End test using Playwright for the UmbNav project. This test navigates to the Umbraco backoffice and logs in.

```typescript
import { test, expect } from '@playwright/test';
import { ConstantHelper } from "@umbraco/playwright-testhelpers";

test.describe("UmbNav", () => {
    test('can add content item', async ({ umbracoUi }) => {
        await umbracoUi.goToBackOffice();
        await umbracoUi.login.enterEmail(ConstantHelper.testUserCredentials.email);
        // ... test implementation
    });
});
```

--------------------------------

### E2E Testing Commands (Bash)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Outlines bash commands for end-to-end testing using Playwright, including installing browsers, running all tests, running with UI, and using debug mode.

```bash
cd Umbraco.Community.UmbNav

# Install Playwright browsers
npx playwright install

# Run all tests
npx playwright test

# Run with UI
npx playwright test --headed

# Debug mode
npx playwright test --debug
```

--------------------------------

### Playwright E2E Test Commands

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Common commands for running Playwright End-to-End tests, including installation, execution, and reporting.

```bash
# Install Playwright browsers (first time only)
npx playwright install

# Run all tests
npx playwright test

# Run specific test file
npx playwright test add-content-item.spec.ts

# Run with UI
npx playwright test --headed

# Debug mode
npx playwright test --debug

# Generate HTML report
npx playwright test --reporter=html
```

--------------------------------

### Update C# Model for New Property

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example of adding a new property to the C# model for a menu item, demonstrating the syntax for a nullable string property.

```csharp
public string? MyNewProperty { get; set; }
```

--------------------------------

### Integration Test RegisterUmbNavServicesComposer

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example test scenario for RegisterUmbNavServicesComposer integration testing. Verifies correct service registration within the DI container.

```csharp
[Fact]
public void Compose_RegistersAllServices()
{
    // Use Umbraco TestHelper to create builder
    // Verify IUmbNavMenuBuilderService resolves correctly
}
```

--------------------------------

### Integration Test UmbNavValueConverter

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example test scenario for UmbNavValueConverter integration testing. Focuses on validating configuration application and Delivery API conversion.

```csharp
[Fact]
public void ConvertIntermediateToObject_WithConfiguration_AppliesOptions()
{
    // Test with real DataType that has UmbNavConfiguration
    // Verify RemoveDescription, RemoveCustomClasses, MaxDepth work correctly
}
```

```csharp
[Fact]
public void ConvertIntermediateToDeliveryApiObject_ReturnsProcessedItems()
{
    // Test Delivery API path with expanding/preview flags
}
```

--------------------------------

### Integration Test TelemetryNotificationHandler

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example test scenario for TelemetryNotificationHandler integration testing. Focuses on verifying the correct payload is sent via HTTP.

```csharp
[Fact]
public async Task HandleAsync_WithValidData_SendsCorrectPayload()
{
    // Use WireMock or similar to create mock HTTP server
    // Verify POST body contains correct Base64-encoded JSON
    // Verify headers are correct
}
```

--------------------------------

### Update Localization for New Property Label (TypeScript)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Example of adding a new label for a custom property to the English localization file, ensuring UI consistency.

```typescript
myNewPropertyLabel: 'My New Property'
```

--------------------------------

### UmbNav Constants for Property Editor Aliases

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Defines the current and legacy property editor aliases used by UmbNav for Umbraco data types. The legacy alias is crucial for the migration system to detect older installations.

```csharp
// Current property editor alias
public const string PropertyEditorAlias = "Umbraco.Community.UmbNav";

// Legacy alias (used for migration detection)
internal const string LegacyEditorAlias = "AaronSadler.UmbNav";
```

--------------------------------

### Frontend Development Commands (Bash)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Lists npm commands for frontend development, including running a development server with watch mode, creating a production build, and performing type checking.

```bash
cd Umbraco.Community.UmbNav

# Development with watch
npm run watch

# Production build
npm run build

# Type checking
npm run typecheck
```

--------------------------------

### Backend Development Commands (Bash)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Contains dotnet CLI commands for backend development, such as building all projects, running the test site, executing unit tests, and packing NuGet packages.

```bash
# Build all projects
dotnet build

# Run test site
dotnet run --project TestSite.V17

# Run unit tests
dotnet test

# Build NuGet packages
dotnet pack
```

--------------------------------

### Custom Backend Menu Builder Service (C#)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Shows how to create a custom menu builder service by inheriting from UmbNavMenuBuilderService and overriding methods like ShouldIncludeItem for custom logic.

```csharp
// Custom Menu Builder Service
public class CustomMenuBuilderService : UmbNavMenuBuilderService
{
    protected override bool ShouldIncludeItem(UmbNavItem item, bool isLoggedIn)
    {
        // Custom visibility logic
        return base.ShouldIncludeItem(item, isLoggedIn);
    }
}

// Register with composer
public class CustomComposer : IComposer
{
    public void Compose(IUmbracoBuilder builder)
    {
        builder.Services.AddUnique<IUmbNavMenuBuilderService, CustomMenuBuilderService>();
    }
}
```

--------------------------------

### Build Command for Missing Assets

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Command to run to build missing assets for the project. This is useful when encountering issues with missing files.

```bash
npm run build
```

--------------------------------

### UmbNav Migration Helper Method

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Provides a static helper method for testing the transformation of legacy JSON values to the new UmbNav format. It requires a logger, the legacy JSON string, and outputs the transformed JSON string.

```csharp
UmbNavLegacyModelMigration.TryTransformLegacyValue(logger, legacyJson, out string newJson)
```

--------------------------------

### Registering Frontend Extensions (TypeScript)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Demonstrates how to register custom toolbar actions, item slots, and item types within the UmbNav frontend extension system using the UmbNavExtensionRegistry.

```typescript
import { UmbNavExtensionRegistry } from '/App_Plugins/UmbNav/dist/api.js';

// Toolbar Action
UmbNavExtensionRegistry.registerToolbarAction({
    alias: 'my-action',
    label: 'My Action',
    icon: 'icon-star',
    position: 'start',  // 'start' | 'end' | number
    isVisible: (item, config) => true,
    onExecute: async (item, context) => {
        context.updateItem({ ...item, customClasses: 'modified' });
    }
});

// Item Slot
UmbNavExtensionRegistry.registerItemSlot({
    alias: 'my-slot',
    position: 'after-name',  // 'before-name' | 'after-name' | 'before-toolbar' | 'after-toolbar'
    isVisible: (item) => item.customClasses?.includes('featured'),
    render: (item) => html`<span class="badge">Featured</span>`
});

// Item Type
UmbNavExtensionRegistry.registerItemType({
    alias: 'divider',
    label: 'Divider',
    icon: 'icon-navigation-horizontal',
    defaultValues: { itemType: 'Title', name: '---' }
});
```

--------------------------------

### Update Manifest for New Configuration Option (TypeScript)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Shows how to register a new configuration option in the frontend manifest, specifying its alias, label, and UI property editor.

```typescript
{
    alias: 'myNewOption',
    label: 'My New Option',
    propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle'
}
```

--------------------------------

### Add New Configuration Option (C#)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Demonstrates how to add a new boolean configuration option to the Umbraco property editor configuration in C#.

```csharp
public bool MyNewOption { get; set; }
```

--------------------------------

### Commit Message Conventions

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Illustrates the conventional commit message format used for the project, including prefixes like 'feat', 'fix', 'docs', 'refactor', 'test', and 'chore'.

```git
feat: Add custom toolbar action support
fix: Resolve drag-drop issue with expanded items
docs: Update extensibility documentation
refactor: Simplify menu builder service
test: Add unit tests for value converter
chore: Update npm dependencies
```

--------------------------------

### Basic UmbNav Rendering in CSHTML

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/README.md

This CSHTML snippet demonstrates how to retrieve and render navigation items using the UmbNav TagHelper. Ensure the 'navigation' property is correctly set in your Umbraco content.

```cshtml
@using Umbraco.Community.UmbNav.Core.Models

@{ 
    var menuItems = Model.Value<IEnumerable<UmbNavItem>>("navigation");
}

<nav>
    <ul>
        @foreach (var item in menuItems)
        {
            <li>
                <umbnavitem menu-item="@item"
                            active-class="active"
                            current-page="@Model">
                </umbnavitem>
            </li>
        }
    </ul>
</nav>
```

--------------------------------

### Clear NuGet Cache Command

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Command to clear the local NuGet cache. Use this if you encounter issues with NuGet package restores.

```bash
dotnet nuget locals all --clear
```

--------------------------------

### Unit Test UmbNavMenuBuilderService

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

A basic unit test for the UmbNavMenuBuilderService. It verifies that the service can build a menu from valid items.

```csharp
public class UmbNavMenuBuilderServiceTests
{
    [Fact]
    public void BuildMenu_WithValidItems_ReturnsProcessedItems()
    {
        // Arrange
        var service = CreateService();
        var items = CreateTestItems();

        // Act
        var result = service.BuildMenu(items, UmbNavBuildOptions.Default);

        // Assert
        Assert.NotNull(result);
        Assert.NotEmpty(result);
    }
}
```

--------------------------------

### TypeScript Type Checking Command

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Command to run TypeScript type checking. This helps identify and fix type-related errors in the project.

```bash
npm run typecheck
```

--------------------------------

### ModelEntryType Interface (TypeScript)

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Defines the structure for navigation items, including properties for keys, names, URLs, icons, item types, and hierarchical children.

```typescript
interface ModelEntryType {
    key: Guid;
    name: string;
    description?: string;
    url?: string;
    icon?: string;
    itemType: 'Link' | 'Document' | 'Title';
    udi?: string;
    anchor?: string;
    published?: boolean;
    naviHide?: boolean;
    culture?: string;
    children?: ModelEntryType[];
    expanded?: boolean;
    target?: string;
    noopener?: string;
    noreferrer?: string;
    customClasses?: string;
    image?: MediaItem[];
    includeChildNodes?: boolean;
    hideLoggedIn?: boolean;
    hideLoggedOut?: boolean;
}
```

--------------------------------

### Extend UmbNavItem TagHelper

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Extends the default UmbNavItemTagHelper to add custom attributes and modify URLs. Useful for adding tracking parameters or analytics attributes.

```csharp
[HtmlTargetElement("custom-navitem")]
public class CustomNavItemTagHelper : UmbnavitemTagHelper
{
    protected override string? GetUrl()
    {
        var url = base.GetUrl();
        return url != null ? $"{url}?tracking=nav" : null;
    }

    protected override void ProcessCustomAttributes(
        TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.SetAttribute("data-analytics", "nav-click");
    }
}
```

--------------------------------

### UmbNavItem C# Data Model

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Defines the core data structure for a navigation item in UmbNav. It includes properties for identity, content, hierarchy, display, link attributes, and visibility.

```csharp
public class UmbNavItem
{
    // Identity
    public Guid Key { get; set; }
    public string Name { get; set; }
    public UmbNavItemType ItemType { get; set; }  // Link, Document, Title

    // Content
    public string? Url { get; set; }
    public Guid? ContentKey { get; set; }
    public IPublishedContent? Content { get; set; }  // Resolved by service

    // Hierarchy
    public IEnumerable<UmbNavItem>? Children { get; set; }
    public int Level { get; set; }

    // Display
    public string? Description { get; set; }
    public string? CustomClasses { get; set; }
    public string? Icon { get; set; }
    public IPublishedContent? Image { get; set; }

    // Link attributes
    public string? Target { get; set; }
    public string? Noopener { get; set; }
    public string? Noreferrer { get; set; }

    // Visibility
    public bool HideLoggedIn { get; set; }
    public bool HideLoggedOut { get; set; }
    public bool IncludeChildNodes { get; set; }
    public bool IsActive { get; set; }
}
```

--------------------------------

### Update TypeScript Type for New Property

Source: https://github.com/aaronsadleruk/umbraco.community.umbnav/blob/develop/CLAUDE.MD

Shows how to add a new optional string property to the TypeScript interface for navigation items, matching a C# model update.

```typescript
myNewProperty?: string;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.