LiveTiles Intranet Hub

LiveTiles Intranet Hub

  • Hub
  • Workspaces
  • Metadata
  • Governance
  • What's New

›Guides

Getting Started

  • Overview
  • Architecture
  • Installation

    • Microsoft 365
    • SharePoint 2019
  • Upgrade
  • Configuration

Guides

  • Hub
  • Multiple JSON Configuration Files
  • Cognitive Page Translation
  • Theming
  • Custom Styling
  • Navigation
  • Matrix
  • Search
  • People Search
  • Page
  • Layout
  • Footer
  • Multi Language
  • Data Aggregation
  • Keyboard Shortcuts
  • SharePoint Integration
  • Custom Code
  • Notifications
  • List Items Grouping
  • Multi Content Type Item Template
  • Everywhere Panel
  • Everywhere Panel SP2019
  • Everywhere Panel Manager
  • Everywhere Panel Audience Target
  • MegaMenu Manager
  • JSON GUI Editor
  • Coveo Hosted Search Page
  • Mobile Configuration

LiveTiles Viva Cards

  • LiveTiles Office Locations
  • LiveTiles Reach Events Viva Card
  • LiveTiles Reach News Viva Card
  • LiveTiles People Search Viva Card
  • LiveTiles Weather Viva Card

Widgets

  • Content Items Widget
  • Tabs Widget
  • Hero Widget
  • Markup Widget
  • Schedule Widget
  • Slider Widget
  • Timezone Widget
  • Weather Widget
  • User Widget Zones

Web Parts

  • Alerts Web Part
  • Reach News Web Part
  • Reach Posts Web Part
  • Reach Events Web Part
  • Reach Pages Web Part
  • Celebrations Webpart
  • FAQ Web Part
  • Lists Web Part
  • People Web Part
  • Tour Guide Web Part

Data Connectors

  • SharePoint Search
  • SharePoint List
  • Microsoft Graph
  • Microsoft Outlook
  • Web APIs
  • Microsoft Search
  • Coveo Search Data Provider

Navigation Builder

  • Getting Started
  • MegaMenu
  • Matrix

Navigation

Overview

LiveTiles Intranet Hub provides a well organized navigation, which helpes the user to access the desired places quickly and prevents them to get lost in Microsoft 365. The navigation is located in the header and consists of top navigation nodes with each having its own mega flyout associated.

Overall Availability

The navigation of LiveTiles Intranet Hub can be integrated all over in SharePoint Online tenant. You can achieve that by adding the LiveTiles Intranet Hub app to the sites, where the navigation should be integrated.

Structure

Each mega flyout of a top node is structered in to the following hierarchical levels:

  • Page
  • Group
  • Link

Megamenu

Inline Editor

The configuration of the megamenu can be done via a comfortable inline configuration editor. In this editor you can define new nodes and the elements of the mega flyout. Elements of the menu can be arranged via drag and drop. Editor can be accessed via the action menu(lightning menu) by clicking on Edit Menu.

Note: Parent node will be shown only if it contains items under it.

Megamenu

Multi-language Support

All the texts of the elements in the megamenu can be defined in mulitple languages. You can even define separate URLs for the links in case the links point to different pages for each language.

Top Navigation Nodes Icons

The top navigation nodes can be rendered in different ways depending on the device you access the application with. On desktop you can choose between displaying only text, an icon or both text and icon while on mobile you have the choice of rendering either only text or text and icon.

The configuration is done on a per-node basis within each node's style property. On the iconUrl property you can specify the URL of the icon. If this is omitted, only the node title will be rendered.

The render mode can be specified on the renderMode property for both mobile and web on the corresponding sub-properties, mobile and web respectively. The accepted values for render modes can be found by looking up the enums MobileMegaMenuRootNodeTitleRenderMode and WebMegaMenuRootNodeTitleRenderMode in the reference documentation.

A guide to specifying the render mode:

  • in order to render the text only you only need to specify the value text on the renderMode property. You don't need to specify anything for the iconUrl property.
  • in order to render the text and icons you need to specify the value textandicon on the renderMode property together with the URL of the icon on the iconUrl property.
  • in order to render the icon only you need to specify the value icon on the renderMode property together with the URL of the icon on the iconUrl property. This render mode is not available on mobile.

Desktop rendering options example:

Megamenu

Mobile text and icon rendering option example:

Megamenu

Hyperlink Interception

By default on a modern page in SharePoint when a hyperlink is clicked, navigation to the page is achieved via a page router to avoid full refresh of the screen. Click here for more information

You can control weather the page will make a full refresh from a link clicked inside the menu by setting an optional feature flag in your Hub Config.

"features": {
    ...
    "megaMenu": {
      "dataInterception": "off"
    }
  }

Note: This dataInterception property is by default "on"

Modern Style

To implement a modern style to the header/navigation area, set a style string value to modern in the header object of your config.

  "header": {
    "style": "modern",
    ...
  }

Navigation Modern Style

Top Navigation Nodes Styling

Top navigation nodes can be styled with custom colors for the background and the text. This can be done via the global config by specifying the desired color combination for each root node under the style optional property.

For defining the colour of an active megamenu child item, add this configuration inside the styles node from the Hub JSON Config Editor:

Before applying the JSON configuration, the active elements will have a default color such as this:

Active-Element-Before-Colour

     "colors": {
      "component": {
        "header": {
          "megaMenu": {
            "highLightText": "HEX CODE for desired colour"
          }
        }
      }
    }

After applying the JSON configuration, the active elements will look like this:

Active-Element-After-Colour

The configuration used for this example is this:

     "styles": {
    "colors": {
      "component": {
        "header": {
          "megaMenu": {
            "highLightText": "#FF00E8"
          }
        }
      }
    }
  }

Masonry Style Layout

By default, groups of menu items in the Megamenu flyout is displayed in a grid style layout. In certain instances this can result in whitespace between the groups depending on the number of items in each group. To remove this whitespace you can enable a masonry style layout with the following configuration.

"header": {
  "megaMenuSettings": {
    "flyoutMasonryLayout": true
  }
}

Masonry Layout

← Custom StylingMatrix →
  • Overview
  • Overall Availability
  • Structure
  • Inline Editor
  • Multi-language Support
  • Top Navigation Nodes Icons
  • Hyperlink Interception
  • Modern Style
  • Top Navigation Nodes Styling
  • Masonry Style Layout
Docs
HubWorkspacesMetadataGovernance
References & Samples
Hub ReferenceHub ConfigsWorkspaces ReferenceWorkspaces ConfigsMetadata Configs
More
What's NewLiveTiles Products
LiveTiles
Copyright © 2025 LiveTiles