SharePoint Page Designer - Nav Menu Tile

In order to use the Nav Menu Tile, you will need to understand the nature of the tile. To help you achieve a deeper understanding, this article will address the following:

Developer Notes

Summary: A Nav Menu Tile allows you to display site level and custom navigation in a bar menu, list menu, or responsive menu. This can allow for the creation of headers or footers using custom navigation.

Why the Nav Menu Tile? LiveTiles Cloud has a built in side menu for specifically space and page level. Using the Nav Menu Tile allows for a horizontal display of site level and custom added URLs.

What the Nav Menu Tile has to offer: The Nav Menu Tile allows high flexibility in terms of displayable content. The Tile makes it easy for users to display site level navigation, or add additional custom URL navigation within the tile (can be configured). When you click and drag the Nav Menu Tile to the canvas, the tile will display the current site level spaces, with pages hidden underneath the spaces. By default, the tile will be set to show private and draft spaces and pages, but this can be toggled off in the settings under the Links tab.

Summary: Once the Nav Menu Tile has been placed onto the page, you will be able to open up the settings and changing the way the content is displayed (through a bar, list, or responsive layout. The link source can also be set to display site and custom navigation, or just custom navigation.

Settings: The Nav Menu Tile Settings have five tabs: General, Text, Links, Tile Behavior (or Layout if in Fixed Width), and Advanced. This section will only describe the General Tab, Text Tab, and Links Tab. This is because the Tile Behavior (or Layout) Tabs are consistent across all tiles. For more information about the Tile Behavior (or Layout) Tab and the Advanced Tab, refer to their respective section below:

The General Tab gives users the ability to choose the style for the navigation, and change the color behavior of the tile.

Width: Adjusts the width of the tile, in pixels.

Height: Adjusts the height of the tile, in pixels.

Background Color: Changes the background color of the tile using the color picker.

Advanced Styles: For more information on Advanced Styles (AS), refer to the article that discusses the features of AS. Advanced Styles will almost always be under the General Tab. 

Item Color: Changes the background color of the navigation links using the color picker.

Hover Color: Changes the color of the navigation links when the mouse is hovering over a link using the color picker.

Layout Type: Changes the style the links are displayed through a Bar (Default), List, or Responsive. Responsive can choose between displaying left or right.

Show Responsive Menu On Small Screens: Toggles whether the Nav Menu Tile will forcibly display as a responsive menu when the screen size is small enough.

The Text Tab offers stylistic typeface configurations. This tab essentially controls how text is displayed within the tile.

Override Page Font: This setting allows the user to override the font family for the tile. Once checked, Font Family will appear.

Font Size: Changes the size (in pixels) of the text.

Font Color: Changes the color of the text. Colors are modified via a color picker that appears once font color is clicked.

Font Style: Allows the user to toggle the font to be underlined, Italic, or both.

Font Weight: Allows the user to choose the weight of the font (Light, Normal, Bold).

The Links Tab chooses how links are opened, where the links are being sourced from, settings for how the site links are displayed, and the option to add custom links.

Target Type: Changes the opening behavior of a link when it is clicked by doing New Window, In Place, or the Default open behavior.

Link Source: Chooses between displaying links through the site and custom links (Site + Custom), or displaying links through custom alone (Custom). If you want to display site links without any custom links, this can be achieved by not adding any custom links.

Show Private Spaces: Toggles whether the Site + Custom Link Source setting will display private spaces in the tile.

Show Draft Pages: Toggles whether the Site + Custom Link Source setting will display pages that are in draft mode.

Adding Custom Links: By clicking + Add Link at the bottom, a new row will be created. Here, the display text and the URL can be set. Custom links can be reordered by clicking and dragging on the arrow to the left of the row, or deleted by clicking on the trash can to the right of the row.

This tab can either be Tile Behavior or Layout. Both of which depends on the type of canvas that is selected. For more information, refer to the following article: Layout & Tile Behavior tabs (Includes Best Practices). 

The Advanced tab allows for more direct control of the tile through administrative settings and custom code. Users can control tile visibility to specific groups of people, disallow other users to modify the tile,  and implement custom CSS classes. For more information, refer to the following article: Advanced tab (Includes Best Practices)

Keep Smaller Screens in Mind: When creating your navigation, utilizing the responsive menu on smaller screens setting can make it so that you have the best of both worlds for users on larger and smaller devices.

Make a Header or a Footer: Create a saved section for your navigation so it can be used throughout your site instead of having to build it individually each time.