Customize the logo

Applications often include static assets, such as images, that remain unchanged. To manage these assets reliably, store them directly in the application package. This approach lets the application retrieve them efficiently.

Copy link to this section

Add a logo

This example shows how to add logo.svg to a new package. Name the package examplePackage. You can use this asset in both curated UI Framework components and custom React components.

Copy link to this section

Store the asset

Place static assets, such as images, in the examplePackage/ui/content directory. The platform reads files from this directory without modifying them. Include only static resources here, such as images, fonts, or PDFs.

To organize assets, create subdirectories under content. The platform includes these subdirectories in the public URL path. For example, if you put logo.svg in examplePackage/ui/content/assets/images, the platform serves it at:

https://{cluster}/{environment}/{app}/assets/images/logo.svg

To learn more about file organization, read UI directory structure and Create a Full-Stack Application Package.

Copy link to this section

Use a custom logo in the nav menu

Most applications use a navigation layout that includes a nav menu component on the side. You can customize this component by setting the logoImageUrl field in your JSON configuration. This option works in both root-level and nested submenus.

The following example shows how to define a navigation menu with a custom logo using the UiSdlNavMenu component:

/* {package}/src/ui/c3/meta/examplePackage.NavMenu.json */

{
  "type": "UiSdlConnected<UiSdlNavMenu>",
  "component": {
    "itemSections": [
      {
        "items": [
          {
            "id": "home",
            "title": "My App",
            "icon": "house",
            "redirectRoute": {
              "urlPath": "/home"
            }
          },
          {
            "id": "dashboard",
            "title": "Wind Turbine Dashboard",
            "icon": "tachometer-alt",
            "subMenu": {
              "title": "Submenu Title",
              "logoImageUrl": "assets/images/menu/learn.svg",
              "items": [
                {
                  "type": "UiSdlNavMenuItem",
                  "id": "DashboardPage",
                  "title": "Example",
                  "redirectRoute": {
                    "urlPath": "/dashboard/thing_1"
                  }
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

In this example, the application uses the logoImageUrl property to display a custom logo in the submenu. Place the logo at the path relative to the {package}/ui/content directory (for example, {package}/ui/content/assets/images/menu/learn.svg) so the platform can serve it correctly at runtime.

Copy link to this section

Reference the asset

To reference the image in your UI components, follow the guidance in Referencing URLs.