Create Tile Navigation for SharePoint Site
This article describes how to create Tile Navigation for 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 the new Modern UI.
Add Smart Tiles to the Page
Open the page where you want to add the Tiles Navigation pane in edit mode.
💡 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.
Add the Web Part
In case you use a full-width column all available Web Parts are presented in the section. Go to Smart Tiles to add the web part:
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:
Configure the Web Part
Once the web part is 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. The 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.
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 the 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 be black or white. If none of these parameters is selected the color depends on the tile color.