How to configure the Involv Left Navigation

1. Overview

Intranet Admins can configure an additional navigation panel called Left Navigation (or Extra Navigation) to help users easily browse through Involv sites.
Each active site includes a Navigation list in its site contents, which can be used to populate the Left Navigation component.

This guide explains how to configure the available settings, enable advanced features, and optimize the floating behavior of the Left Navigation.

2. What you’ll learn

After reading this article, you’ll know how to:

Connect the Left Navigation to the correct Navigation list.
Choose the best display mode (hierarchical, flat, breadcrumbs).
Configure language, caching, and audience targeting.
Control floating, offsets, and minimum viewport width.
Fine-tune how many navigation levels are rendered and expanded.

3. Configuration options – quick reference

Configuration option	Explanation
Title	Text shown at the top of the Left Navigation panel. Use a short, descriptive title (for example, “HR navigation”).
Select the site that contains the configuration list	Choose the SharePoint site that holds the Navigation configuration list. This is usually the same site where the content lives (for example, HR site).
Configuration list name (default: InvolvLeftNavigation)	Name of the list that stores the navigation nodes. In most setups this list is called Navigation. Change only if you use a custom list name.
Use legacy version – Will be deprecated in Q4 2024	Toggle to keep using the old version of the Left Navigation. Only use this if needed for backwards compatibility; plan to move to the new version before Q4 2024.
Choose the top-level navigation node	Select the root node from which the navigation should start (for example, HR Demo site, Corporate, IT, …). All child items of this node are shown in the menu.
Display mode – Hierarchical	Shows the navigation as a collapsible tree with levels (sites, subsites, pages). Recommended for complex structures.
Display mode – Flat	Shows a simple one-level list of links without hierarchy. Useful for short menus or quick-link scenarios.
Display mode – Breadcrumbs	Displays the path from the top-level node to the current location (for example, Home › HR › Policies). Helps users understand where they are.
Display the current location if available	When enabled, highlights or shows the node that corresponds to the current page, making orientation easier for users.
Prefer user language	When enabled, the web part shows navigation titles in the user’s preferred language (based on their SharePoint language settings), if translations are provided.
Enable Cache	Caches the navigation data for better performance and faster page loads. Recommended for production sites.
Enable target audience	When enabled, navigation items can be targeted to specific audiences. Users will see only the links that match their audience profile.
Target Audience	Field to specify which audience(s) should see this instance of the navigation (for example, HR Managers, Finance, All Employees). Works together with “Enable target audience”.
Enable floating	Turns on floating mode. When floating is active, the Left Navigation is visually detached from the main page content and can “float” next to it.
Enable sticky floating	When floating is enabled, this keeps the navigation fixed while the rest of the page scrolls. Ideal for long pages where the menu should stay visible.
Float under title area	When enabled, the floating navigation starts below the page title area instead of at the very top of the page. Keeps the title visually aligned with the content.
Occupy full available height	Stretches the Left Navigation to use all available vertical space in the viewport (minus footer and header areas).
Offset top	Distance (in pixels) between the top of the floating navigation and the top of the viewport or title area. Increases or decreases the gap above the menu.
Offset right	Horizontal distance (in pixels) from the right side of the Left Navigation to surrounding elements. Use to fine-tune spacing.
Offset bottom	Distance (in pixels) between the bottom of the floating navigation and the footer/viewport bottom. Useful to avoid overlapping the footer.
Offset left	Horizontal distance (in pixels) from the left page edge to the navigation. A larger value pushes the navigation more to the right.
Minimum viewport width	Minimum browser width (in pixels) required to activate floating. If the viewport is narrower than this value, the web part automatically switches back to normal (non-floating) mode. Must be 1030px or higher.
Enable links for expandable items (Adds expansion button)	In hierarchical mode, enables or disables direct links on parent nodes. When disabled, clicking a parent node only expands/collapses its children.
Levels to fold open initially	Number of levels that are expanded when the page first loads (for example, 1 = only top level open, 2 = top level + one sublevel).
Levels to render (Set to 0 to render all levels)	Maximum number of levels to generate in the navigation tree. Use 0 to render the entire hierarchy, or set a number to limit depth.
Tutorial	Embedded video tutorial that shows how to configure and use the Left Navigation. This is for reference only and does not affect functionality.
About	Shows the web part version installed on the page (for example, 15.2.1.0). Useful for support and troubleshooting.
Show in mobile and email view	Controls whether the web part is visible in mobile layouts and email renderings of the page. Turn off if you want the navigation to be desktop-only.

4. Additional features

Enable Cache
Boost performance and page loading speed by enabling caching of the Left Navigation.

Enable Target Audience
Assign specific audiences to navigation items, creating personalized navigation for certain user groups (for example, HR Managers).

Multilingual support

Each navigation node can be defined in multiple languages.
Provide a title and URL for each supported language.
In the component settings, enable Prefer user language to respect the user’s preferred language.

5. Display and hierarchical options

Display the current location if available highlights where the user is in the navigation.
Enable links for expandable item allows clickable links on expandable nodes.
Levels to fold open initially defines how many levels are expanded on first load.
Levels to render sets how many levels of the tree are rendered (use 0 to render all levels).

6. Floating behavior and layout

The Left Navigation web part includes a Floating section with several configuration settings:

Floating mode
- Normal: Navigation scrolls with the page.
- Sticky floating: Navigation remains fixed while the page content scrolls.
Offsets (top, right, bottom, left)
Define vertical and horizontal offsets for the web part. These offsets create space around the navigation so it does not touch other page elements.
Occupy full available height
Makes the Left Navigation extend through the full vertical space of the page.
Minimum viewport width
Sets the minimum viewport width (in pixels) at which floating mode is enabled. If the screen width is smaller than the defined value, the web part will render in normal mode.

When floating is active, the component automatically adds a left margin to the page title and content areas, keeping the layout centered similar to a Team Site.

Dynamic size considerations

The component’s width and height are dynamically calculated via JavaScript. CSS overrides will have no effect unless marked with !important (not recommended).
Width reserved for the navigation corresponds to the left margin of the page content (excluding the footer). Increasing horizontal offsets reduces this available space.
In Normal mode, height is calculated from below the navigation (and SharePoint edit bar, if visible) to just above the comments section.
In Sticky mode, height is calculated from below the navigation to the bottom of the viewport, excluding the footer area.

7. Watch interactive tutorial

Watch the interactive demo below to follow each step by step.

Involv version 5.2