Create Tile Navigation for SharePoint Site

5/27/2020
Applies To: Smart Tiles Web Part
Environments: SharePoint Online, Microsoft Teams

This article describes how to create Tile Navigation to your site with Vitextra Smart Tiles App.

Introduction

Vitextra Smart Tiles allows building custom tiles navigation panel. Each tile has Title, Icon, and Navigation URL properties to suit your needs.

This article describes how to add Smart Tiles Web Part to the page and configure it.

📝 Note
Smart Tiles does not support the classic page. Use it only with new Modern UI.

Add Smart Tiles to the Page

Open the page where you want to add Tiles Navigation pane in edit mode.

Edit SharePoint Page

Edit SharePoint Page

💡 Tip
Smart Tiles can be placed on the full-width section. Use this feature to make the most of the browser area on a wide display.

Add a Section (Optional)

To use Smart Tiles in full-width mode make sure you have added a full-width column on the page.

Adding full-width column to the page

Adding full-width column to the page

Add the Web Part

In case of you use full-width column all available Web Parts presented on the section. Go to Smart Tiles to add the web part:

Adding Smart Tiles to the full-width section

Adding Smart Tiles to the full-width section

If you need to add the web part to the regular section click the plus icon, type in smart or tiles to filter the list and select Smart Tiles:

Adding Smart Tiles to the page

Adding Smart Tiles to the page

Configure the Web Part

Once the web part added to the page you can configure it with the configuration pane.

Appearance Settings

Smart Tiles web part provides a set of parameters for configuring the appearance of tiles:

  • Font Size. Size of tile caption. Can be in the range from 13px to 42px.
  • Icon Size. Size of tile icon. Minimum value is 2em, maximum - 5em.
  • Internal Indent - tile padding in pixels.
  • Icon Ident - icon bottom margin in pixels.
  • External Indent - tile margin in pixels.

Vitextra Smart Tile Indents

Vitextra Smart Tile Indents

Tiles

To manage tiles go to Configure under Tiles heading in the web part configuration pane.

Tile properties described in the following table

Property Description
Caption Title of the tile. Always displayed in one line.
URL Hyperlink of the tile.
Color Color of the tile. May be set to current theme accent color or one of predefined colors.
Size Vertical size of the tile. Based on 12-column responsive grid.
Icon Fluent Icon. List of all available icons: Fluent UI Icons
Open What happens when a tile is clicked. The available options are: in the same window, in a new window

Additional Settings

Additionally, you can select the color of the text and icon. Text may always black or white. If none of these parameters is selected the color depends on the tile color.

Share