---
schema_version: "1"
id: 41548a71259ca4543d9a361e6cf6f549bef06a29ec891f7f22e6bffe9b7808cb
title: Tile Menu
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_tile_menu.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_tile_menu.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1e3f28c170f7c0b5753aecf1d9f8d57d7d508d99648619996a8d86ae72c2e04d
description: Use the Tile Menu Lightning Web component in Experience Builder to add an intuitive and visually stunning navigation experience to your site.
products:
  - Experiences
release: "264"
---
# Tile Menu

Use the Tile Menu Lightning Web component in Experience Builder to add an intuitive and visually stunning navigation experience to your site.

Customers using the Tile Menu can use images to access an external site, page, record, or global action. For example, clicking an image takes a customer to a page to log a case or file a claim. You can set up a maximum of eight image-link combinations per Tile Menu component.

Consider the following when setting up your Tile Menu:

- To make the images in the tile menu viewable by guest site users:
    - Enable **Let guest users view asset files and CMS content available to the site** in **Administration** | **Preferences** in Experience Builder.
    - Access the site’s guest user profile and **Object Settings**.
    - Then, give read access to Documents.
- When using Translation Workbench to translate text in the Tile Menu, select **Navigation Menu Item** as your **Setup Component**.
- A new version of the Tile Menu component was included in the Summer ’20 release, and allows for much more customization. The new version of the Tile Menu is available in Experience Builder in the Summer ’20 release. If you use the old version of the component, shown as Deprecated in the component properties, the component still functions. If you delete your deprecated component, you must use the new version.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_note.png)

Note

- You can package a tile menu with Bolt Solutions and distribute them. All the properties of the tile menu are included in the package, but admins have to associate a navigation menu to the tile menu after the Bolt Solution is installed.
- To see a Tile Menu and its images from a production org, use a Full sandbox.
- The Tile Menu allows a maximum of 20 tiles.

1. From the components list, select the Tile Menu component and drag it onto a site page.
2. On the page, select the **Tile Menu** component.
3. In the property editor, configure the properties for the component.
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:28.000000000000004%">
              <col style="width:72%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d122551e106">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d122551e109">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Default Navigation Menu</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Select a navigation menu to showcase in Tile
                  Menu.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Edit Navigation Menu</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Click to edit your chosen navigation menu.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Image Layout</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">
                  <p>Select one of the three image options for the images in
                    each menu tile.</p>
                  <ul>
                    <li>Full, No Overlay: Image takes up the whole tile. The
                      banner with text doesn’t overlay the image.</li>
                    <li>Full, With Overlay: Image takes up the whole tile.
                      The banner with text overlays the image.</li>
                    <li>Partial: Image is contained in an icon-type box
                      within the tile.</li>
                  </ul>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">&nbsp;</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">&nbsp;</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <strong class="uicontrol">Tile Formatting</strong>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Click to expand.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Show banner</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">For the Full, With Overlay layout, choose to show a
                  banner.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Banner Position</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">
                  <p>Options for:</p>
                  <ul>
                    <li>Full, No Overlay: Top</li>
                    <li>Full, With Overlay: Top or Bottom</li>
                    <li>Partial: Top, Right, Left, Bottom</li>
                  </ul>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">&nbsp;</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">&nbsp;</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Banner Height</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">
                  <p>Choose 15–100%.</p>
                  <p style="margin-bottom:0;">This setting doesn’t apply to the Full,
                    No Overlay layout.</p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Banner Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Set the color for the banner background.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Border Radius</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Choose from 0-50px.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Blank Image Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Tile color if there’s no image.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Tile Background Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">For the Partial layout, the background tile color if the
                  image doesn’t take up the entire tile.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Icon Size</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Size of the icon containing the image for the Partial
                  layout. Choose from small, medium, or large.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <strong class="uicontrol">Text Formatting</strong>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Click to expand.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Color</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Text color.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Size</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Text size. Choose from small, medium, or large.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e106 ">
                  <samp class="parmname">Horizontal Alignment</samp>
                </td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d122551e109 ">Choose from right, left, or center.</td>

              </tr>
            </tbody>
          </table>

![Example](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_example.png)

Example Example of a tile menu.

![Tile menu component](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/networks_tile_menu.png)

#### See Also

- [Navigation Menu](https://help.salesforce.com/s/articleView?id=experience.rss_setup_nav_menu.htm&release=264.0.0&type=5 "The Navigation Menu component extends your site’s navigation beyond navigational topics. Navigation menu items can include Salesforce objects, topics, pages in your site, URLs to external sites, and menu labels. Menu labels are parent headings under which you can nest other menu items. You can also enable the App Launcher to make it easy for members to switch between their sites and their Salesforce org.")
- [Assign an Audience to a Component Variation](https://help.salesforce.com/s/articleView?id=experience.networks_personalize_components.htm&release=264.0.0&type=5 "Use audiences to vary the content that users see within the CMS Collection, Navigation Menu, or Tile Menu components. For example, show one navigation menu to your site members and a more abbreviated navigation menu to guest users. Or show different CMS content to internal employees and external partners.")