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

Matrix

Overview

Certain organizations are organized in a complex way with units or dimensions structured not in a hierarchical way. A Matrix navigation has been built to help such a situation by introducing a Matrix of combinations of Dimensions or units. This will help the information architecture in a proper way. For example employees in an Australian location may not be interested in the content relevant to Europe or Germany. The Matrix navigation can serve the right content to those targeted users, depending on the selection of dimensions the information is served.

LiveTiles Intranet Hub provides the ability for administrators to construct more concise navigation based on the organisation's user needs. This feature is fully available to all customers.

We have three areas of this feature that comprise the matrix as a whole, the Matrix Editor, the Matrix Navigation and the Matrix Breadcrumb.

Note: This feature is only available on paid subscription types of Intranet Hub.

Enabling The Matrix

The core functionality of the Matrix is behind one feature toggle & the Matrix Breadcrumb is behind another. To enable the Matrix you must add an enabled flag to the features object in the Global Hub Config.

Note: The Matrix breadcrumb will override the Mega Menu breadcrumb if enabled.

"features": {
    ...
    "matrix": {
      "enabled": true,
      "breadcrumb": {
        "enabled": true
      }
    }
  }

Matrix Feature Toggle

You can also use the Matrix without enabling the breadcrumb. In this case the Mega Menu breadcrumb will be the default if enabled.

Matrix Editor

The Matrix Editor is where administrators can create and edit dimensions, groups, items and assignment relationships for their matrix.

This can be accessed by first clicking the Edit Menu link in the action menu and then the Edit Matrix button displayed above the Mega Menu.

Edit Menu Action

Edit Matrix Button

When the editor is active a flyout will appear displaying all the dimensions and their corresponding groups and items (if any exist).

Editor

Managing Dimensions, Groups And Items

You can create dimensions, groups and items by clicking on the associated buttons in the editor flyout.

Note: The filter keys are an optional field that will be made consumable through other web parts at a later stage.

Hovering over an item will also display editing and deleting icons.

Creating the above elements however is not enough for the Matrix Navigation to display. Assignments must be created which we will go over in the next section.

Note: Groups and items cannot be converted to another type once created.

Making Assignments

The first dimension on the left-hand side is the root dimension which contains a collection of root nodes. In order to begin creating a new assignment path, a root node must be selected first.

Root Dimension

Once a root node is highlighted you can continue making an assignment by selecting one of the following dimension items.

Selecting A Root Node

As you make your way across the matrix selecting items to add to an assignment you will notice some items will display as checked or unchecked. This is related to other assignments that have been made which have a similar path that you are currently creating.

Making An Assignment

Assignment paths can also have a URL specified which will open a new tab when the last item in that path is clicked.

Assignment URL

Editing or deleting a path assignment can be done by first selecting the assignment in the editor from left to right starting with a root node and subsequentially de-selecting from right to left in order to remove that assignment.

Note: You must click the Save button located in the bottom right of the editor flyout or any amendments to your matrix will be discarded.

Matrix Navigation

The Matrix Navigation is displayed above the Mega Menu.

Note: If there are no assignments saved, no navigation items will be available.

Making selections from left to right will display any assignment items in the next dimension.

Flyout 1

Flyout 1

Flyout 1

Assignment paths can either be a continuous or non-continuous selection. Meaning you could skip a dimension resulting in the below example selection.

Other Company > None > HR

None Path

The None option will display in the Matrix Navigation if one exists for that root node.

Display Matrix Dimensions in the Mega Menu

You can assign Matrix Dimensions to display alongside Mega Menu items. To enable this behaviour check the "Display in MegaMenu" option while editing a dimension.

Display Dimension In Mega Menu

Display Dimension In Mega Menu

Display Dimension In Mega Menu

Display Dimension In Mega Menu

Matrix Dimension items will always display as the first item in the Mega Menu unless the first item is set to display an icon.

Hide None Dimension Breadcrumb Labels

When the Matrix Breadcrumb is enabled, by default when a dimension assignment is set to the "None" option this will appear in the breadcrumb as below:

Hide None Labeled Breadcrumb Items

This can be hidden using the displayUnlabeledItems feature flag:

"features": {
    ...
    "matrix": {
      ...
      "breadcrumb": {
        "enabled": true,
        "displayUnlabeledItems": false
      }
    }
  }

Hide None Labeled Breadcrumb Items

Load Selections Based On URL

The Matrix selectors can also be updated automatically based on the current page's URL. To enable this feature the below flag must be added to the features > matrix object in the Global Hub Config.

"features": {
    ...
    "matrix": {
      ...
      "loadSelectionByURL": {
        "enabled": true
      }
    }
  }

This will update the Matrix selection path based on the URL assigned to it.

URL Based Selection Loading

Prefix-based URL selection loading

By default, the loadSelectionByUrl feature only looks for assignments that match the exact URL of the page. We can enable the useURLAsPrefix feature in order to have the Matrix recognize URLs that are localized under a specific assignment's designated URL.

To enable this feature, we need to set the useURLAsPrefix property to true under loadSelectionByURL in the Global Hub Config.

  "loadSelectionByURL": {
    "enabled": true,
    "useURLAsPrefix": true
  }

As an example, let's say that we have two Matrix assignments, one mapped to /sites/finances-de and one to /sites/finances-en. Enabling this feature will allow the Matrix to automatically select the /sites/finances-de assignment if we're loading a page under that specific site collection ( ex. /sites/finances-de/SitePages/Home.aspx ), and automatically switch to /sites/finances-en if we go to a page under that site collection.

The Breadcrumb is also updated with the same values as the Matrix selectors.

URL Target

Anchor link targets can also be specified by setting urlTarget within the Matrix object under the features section of the Hub Config.

Note: This property is optional and will default to "_self" if not set.

"features": {
    ...
    "matrix": {
      ...
      "urlTarget": "_blank"
    }
  }

In the above example all links clicked inside the Matrix Breadcrumb or a Matrix Dimension will open the specified URL in a new window.

For more information on anchor element targeting click here.

Preselection Filtering

By default the Matrix Navigation selectors will all display regardless if a dimension is set to a "None" item.

Preselection Filtering

By enabling the preselection feature these selectors will only display if it has items available that do not contain a "None" item or if an item is currently selected within the dimension.

Preselection Filtering

To enable this feature add the below preselection property to the matrix features hub config.

"features": {
    ...
    "matrix": {
      ...
      "preselection": {
        "enabled": true
      }
    }
  }

Hide The Reset Dimension Link

By default the flyout for the root dimension will provide the user with a reset link. When clicked this will reset/clear the current users selection path.

Hide The Reset Dimension Link

This can be hidden by applying the below feature flag to the matrix config.

"features": {
    ...
    "matrix": {
      ...
      "resetRootDimensionLink": {
        "display": false
      }
    }
  }

Matrix Custom Styling

Elements of the matrix menu source is populated with classes that can be targeted via custom CSS. These classes are all prefixed with lthub-.

A number of CSS variables have been defined for some of the more commonly changes styling values. These CSS variables are as follows and can be re-defined in any custom CSS using the :root pseudo class.

:root {
  --matrix-base-font-size: 1rem; // Base font size
  --matrix-dimension-color: inherit; // Dimension selector color
  --matrix-flyout-background: #000; // Flyout background
  --matrix-flyout-text-color: #fff; // Flyout base color
  --matrix-flyout-padding: 2rem; // Flyout container padding
  --matrix-flyout-column-width: 200px; // Flyout column width
  --matrix-flyout-items-per-column: 4; // Flyout number of rows per column
}

Colour variables can be re-defined to match colours set in the Hub Global Settings -> Adjust Theme panel.

// Accent: var(--brand-accent)
// Neutral: var(--brand-neutral)
// Primary: var(--brand-primary)
// Secondary: var(--brand-secondary)

:root {
  --matrix-flyout-background: var(--brand-accent);
}

Variables can be scoped to an item group within the matrix menu by targeting the class of the container for that group. This class is the group ID prefixed by groupid-.

// Where 'europe' is the group ID, displaying 6 items per column for just that group

.groupid-europe {
  --matrix-flyout-items-per-column: 6;
}

For details on applying custom CSS to Hub please take a look at Custom Styling

Matrix Translations

Elements of the matrix can now be translated. This is done by using the language selector that appears in the Editing Mode of the menu.

LanguageSelector

The translation of an element is done in this way:

  • Select a language from the Language Selector
    • SelectedLanguage
  • Click the Edit Matrix button
  • Click on the Edit button of the Matrix Element that you want to translate

After clicking the Edit button, the person with menu editing permissions / the Intranet Hub Admin will be able to edit the item label of the element. The label / title value will contain the translation for that element in the selected language.

EditedDimension

EditedItem

After translating the required elements, the person with menu editing permissions / the Intranet Hub Admin could save these changes by clicking the save button.

TranslationEdit

The Intranet Hub Product is able to detect the user's preferred language and display the correct translation for the Matrix Elements.

TranslatedMatrix

← NavigationSearch →
  • Overview
  • Enabling The Matrix
  • Matrix Editor
    • Managing Dimensions, Groups And Items
    • Making Assignments
  • Matrix Navigation
  • Display Matrix Dimensions in the Mega Menu
  • Hide None Dimension Breadcrumb Labels
  • Load Selections Based On URL
    • Prefix-based URL selection loading
  • URL Target
  • Preselection Filtering
  • Hide The Reset Dimension Link
  • Matrix Custom Styling
  • Matrix Translations
Docs
HubWorkspacesMetadataGovernance
References & Samples
Hub ReferenceHub ConfigsWorkspaces ReferenceWorkspaces ConfigsMetadata Configs
More
What's NewLiveTiles Products
LiveTiles
Copyright © 2025 LiveTiles