uNavbar 1.0.3

uNavbar

A commercial-grade navigation package for Umbraco 17+.

Features

• Dynamic Navigation: Manage your site's main menu via the "Site Settings" node.
• Branding Control: Upload a logo and set your brand name directly from the backoffice.
• Responsive: Includes a lightweight, dependency-free responsive navbar.
• Performance Optimized: Uses efficient queries to ensure zero impact on site speed.

Installation

1. Install the package via NuGet.
2. Build and run your Umbraco site (ensure a valid umbracoDbDSN connection string is configured).
3. On first startup, the migration will create the Site Settings document type and also add a Site Settings node at the content root.
4. If, for any reason, the Site Settings node is not visible under Content, simply right‑click the root of the content tree, choose Create, and select Site Settings to create it manually.
5. Go to the Site Settings node and configure your links and branding.
   • Note: The Header Logo picker is unfiltered by default to maximize compatibility (SVG, PNG, JPG, etc.). You can manually apply filters in the Umbraco backoffice under Settings > Data Types > uNav Logo Picker if required.

Usage

After installing the package and building your project, the Navigation.cshtml partial view will be automatically copied to Views/Partials/Navigation.cshtml (if it doesn't already exist).

Include the partial view in your layout file using either option:

Option 1 - Standard location (recommended):

@await Html.PartialAsync("Navigation")

Option 2 - Full path:

@await Html.PartialAsync("~/App_Plugins/uNav.Common/content/Views/Partials/Navigation.cshtml")

Note: Files in App_Plugins/uNav.Common/ may appear as read-only (this is normal for NuGet package files). The copy in Views/Partials/Navigation.cshtml is writable and can be customized. If you customize it, the package will not overwrite your customizations on future updates.

CSS Customization

The navigation bar uses unav-* classes. You can override these in your own stylesheet or edit navbar-custom.css to match your brand colors.

Requirements

• Umbraco 17+

Content Delivery API Support

uNavbar is compatible with the Umbraco Content Delivery API. To consume your navigation and branding data via API, you must enable both the Content and Media Delivery APIs in your appsettings.json:

{
  "Umbraco": {
    "CMS": {
      "DeliveryApi": {
        "Enabled": true,
        "PublicAccess": true,
        "Media": {
          "Enabled": true,
          "PublicAccess": true
        }
      }
    }
  }
}

Once enabled, you can fetch the Site Settings data via the standard Umbraco Delivery API endpoints.