uNavbar 1.4.0

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.
• Sticky Header (v1.1.0): Toggle a floating/sticky navbar so navigation stays visible while scrolling.
• Logo Alignment (v1.1.0): Align the logo left, center, or right from Site Settings without editing the partial.
• Brand Title Font (v1.2.0): Choose a Google Font (Inter, Outfit, Roboto, Montserrat) or System-Default for the brand title text.
• Active CSS Class (v1.2.0): Set the CSS class used for the current page link (defaults to active) so uNavbar fits existing UI kits.
• Navbar Shadow (v1.4.0): Select the elevation shadow for the header (none (default), shadow-sm, shadow-md, shadow-lg) directly from the backoffice.
• Hover-Activated Dropdown Toggle (v1.3.0): Add a boolean toggle (Trigger On Hover) in Site Settings to switch from mouse click to mouseover for showing menu dropdowns.
• Font Size Rem Scaler (v1.3.0): Scale your main navigation links text size using a font-size dropdown (0.875rem, 1rem, 1.125rem, 1.25rem).
• 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.

Site Settings properties

After upgrading to 1.4.0, restart Umbraco so the migration adds the new Site Settings properties. Rebuild your site so updated Navigation.cshtml is copied into your project.

If you change activeCssClass away from active, add matching rules in your stylesheet (for example .unav-link.current-page { ... }). The package stylesheet still styles .unav-link.active for the default.

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.

Step 1

Install the uNavbar NuGet package.

Step 2

Rebuild and run the solution, then configure Umbraco.

Step 3

Log in to the backoffice. The Site Settings content node should be automatically created.

Step 4

The Site Settings document should appear with the following properties:

Step 5

Add the relevant documents to show in the Navbar by following these steps: Go to the Settings tab and create appropriate Document Types and Templates.

Step 6

Ensure you toggle Allow as Root for the documents you want to show in the content section root.

Step 7

Register the documents inside the Content tab.

Step 8

Add child document support to the root documents.

Step 9

Select the appropriate allowed child node types.

Step 10

Add child documents to the root documents.

Step 11

Ensure that your documents have the correct templates assigned. This is critical for the pages to render on the frontend.

1. Navigate to Settings in the top menu.
2. Expand Document Types and select your document type (e.g., Home Page).
3. Click on Structure (or Templates depending on version) and find Allowed Templates.
4. Select the template you want to use and set it as the Default Template.
5. Save the Document Type.

Now, when you create a document in the Content section, it will automatically use this template.

Follow the guide below to set up the Master page:

1. Create the Master Template: Create a template named Master inside the Templates section. Your code will automatically sync from the Master.cshtml template page you create in your IDE.

2. Select the Template in Content: Choose this template for your selected document in the root content node.

3. Assign the Template to the Document Type: Finally, assign that template to the document type.

Step 12

The structure should look like the image below. You can now configure the navigation bar menus.

Step 13

Select Add and choose the content options.

Step 14

Currently, you can select only one content item at a time.

Step 15

The final structure should look like this:

Troubleshooting

If you encounter the error: "The chosen media type is not valid", follow these steps:

1. Go to Settings > Data Types and select the property editor used for the Logo.

2. Remove the default media type filter.

3. Choose Image as the allowed type.

4. Publish the document again, and it should work.

Final Setup

Register the CSS and partial view in your layout and pages.

Master.cshtml (Layout File)

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"] - My Site</title>

    
    <link rel="stylesheet" href="~/css/navbar-custom.css" />
</head>
<body>
    
    @await Html.PartialAsync("Navigation")

    <main>
        <h1>Hello from uNavbar</h1>
    </main>

</body>
</html>

Home.cshtml (or any page using the layout)

@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
    Layout = "Master.cshtml";
    ViewData["Title"] = "Home";
}

<section>
    <h1>Welcome to My Site</h1>
    <p>Your content goes here.</p>
</section>

You will now see the navigation bar. You can always customize the CSS to fit your needs.

Links

• Feedback Form

🤝 Support

For support, feature requests, or bug reports:

• Website: https://www.atharvaits.com
• Email: contact@atharvaits.com
• Company: Atharva IT Services Pvt. Ltd.

📄 License

Copyright © Atharva IT Services Pvt. Ltd.

This package is free to use for the Umbraco community.

🏢 About Atharva IT Services

Atharva IT Services Pvt. Ltd. a global software development company in Ahmedabad, excels in e-commerce solutions, web development, and software testing.

Made with ❤️ by Atharva IT Services