Exploring the new Navigation Menu object - Qlik Community

Ouadie · ‎2024-12-06

The new Navigation Menu object in Qlik allows for a flexible and easy way to add a menu to your Qlik Sense apps. Whether you're designing an app in Qlik Sense or embedding Qlik capabilities into a web platform, you should make this new object your go-to solution for organized and stylish navigation.

In this blog post, we'll explore into the new Navigation Menu object, its features, customization options, embedding capabilities, and key considerations for getting the most out of it. For a quick overview, check out the SaaS in 60 video below:

Navigation Menu in Qlik Sense Apps

Up until now, navigation in your apps has been limited to the following options:

Navigating through the built in Sheets tab in the assets panel
Custom built extensions
Or, in-app, using existing objects:
- Using buttons:
- Using the layout container in addition to buttons to create custom sidebars:

The new Navigation Menu object enhances your Qlik Sense app usability and makes it easier to achieve similar results faster tailored to your needs

Key Features:

Sheet Organization: Automatically arranges sheets and groups into a hierarchy for intuitive navigation.
Flexible Layouts: Choose from vertical, horizontal, or drawer-style menus, adapting to your app’s design needs.
Custom Styling: Personalize fonts (family, size, weight, and color), background images, align items, and hover and highlight effects. You can also toggle icons or resize the buttons.
Mobile-Optimized: Enable a list view for seamless navigation on mobile devices.
Integration-Friendly: Pair with "sheet title off" and selection bar for a minimalistic yet functional design.

You can toggle the "App Navigation bar > Navigation" or "Sheet Header" option to OFF in the UI settings and have the Navigation Menu object replace your traditional Sheets for a more minimalistic look.

👀 You can see the Navigation Menu object in action on the What’s New App:
https://explore.qlik.com/app/4911b1af-2f3c-4d8a-9fd5-1de5b04d195c

Navigation Menu embedded in your Web Apps

For developers looking to incorporate Qlik analytics into their web applications, the Navigation Menu object can save time when developing a custom sheet navigation. You can easily embed the navigation menu object and customize it to meet your needs. (Learn more here)

How to Embed the Navigation Menu

Here’s a simple example of embedding a horizontal navigation menu in your web app using Nebula.js.

You can read more about Embedding and access the full documentation on qlik.dev:

const nuked = window.stardust.embed(app, {
  context: { theme: "light" },
  types: [
    {
      name: "sn-nav-menu",
      load: () => Promise.resolve(window["sn-nav-menu"]),
    },
  ],
});

nuked.render({
  type: "sn-nav-menu",
  element: document.querySelector(".menu"),
  properties: {
    layoutOptions: {
      orientation: "horizontal",
      alignment: "top-center",
    },
  },
});

Advanced Customization

Using JSON properties, you can customize the navigation menu extensively:

Adjust the orientation, alignment, and layout.
Add drawer functionality for compact navigation.
Style hover and highlight effects, font colors, and background images.
Align menu items to the left, center, or right for a consistent look.

These capabilities make the Navigation Menu a versatile tool for developers working on embedded analytics projects.

nuked.render({
  type: "sn-nav-menu",
  element: document.querySelector(".menu"),
  properties: {
    "layoutOptions": {
      "drawerMode": false,
      "hideDrawerIcon": false,
      "orientation": "horizontal",
      "layout": "fill",
      "alignment": "top-center",
      "separateItems": false,
      "dividerColor": {
        "color": "rgba(0,0,0,0.12)",
        "index": -1
      },
      "largeItems": false,
      "showItemIcons": false
    },
    "components": [
      {
        "key": "general"
      },
      {
        "key": "theme",
        "content": {
          "fontSize": "18px",
          "fontStyle": {
            "bold": true,
            "italic": false,
            "underline": false,
            "normal": true
          },
          "defaultColor": {
            "index": 15,
            "color": "#000000",
            "alpha": 1
          },
          "defaultFontColor": {
            "color": "#ffffff",
            "alpha": 1
          },
          "highlightColor": {
            "index": -1,
            "color": "#3ba63b",
            "alpha": 1
          },
          "highlightFontColor": {
            "color": "#ffffff",
            "alpha": 1
          },
          "hoverColor": {
            "index": -1,
            "color": "#ffa82e",
            "alpha": 1
          },
          "borderRadius": "20px"
        }
      }
    ]
  },
  navigation: sheetObject.navigation,
});

Things to watch out for

While the Navigation Menu object is a fantastic addition, there are some key points to consider:

Content Security Policy (CSP): If you use background images from external URLs, ensure their origins are added to your tenant’s CSP allowlist. This step is essential for compliance and functionality.
Hierarchy Management: Group sheets effectively in your Qlik app to create a logical navigation structure.
Mobile Responsiveness: Test the menu thoroughly on various devices to ensure an optimal user experience, especially when using the list view.
Design Consistency: Align the menu’s styling with the rest of your app for a unified look and feel.