---
schema_version: "1"
id: 31d9bfac2b4c322331b7e3bfb352edca9f8b00972494616f4899724af2f72d33
title: Style Navigation Menus
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_menu_style.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_menu_style.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: fe03491967ddf7f420241aae05002b0c2df36360391ae53673aef5176c730ad4
description: Navigation menus are styled using CSS themes that you can customize to match the design of your website. When you add a navigation menu to a page, it uses a default theme to control its appearance. Choose from other existing themes in the Theme Name dropdown list in the Properties pane.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# Style Navigation Menus

Navigation menus are styled using CSS themes that you can customize to match the design of your website. When you add a navigation menu to a page, it uses a default theme to control its appearance. Choose from other existing themes in the Theme Name dropdown list in the Properties pane.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d173823e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d173823e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d173823e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

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

Alternatively, to customize a theme to suit your needs:

1. Select the navigation menu on the page.
2. Select a theme to use as a base in the Theme Name dropdown list in the Properties pane. Use a theme that most closely matches your site design or select Blank to start with a completely blank theme.
3. Open the Style pane and ensure Class is selected.
4. In the Style dropdown list, select the part of the menu that you want to style. When you select an item, it's highlighted for a few seconds, so you can easily see which part you're styling.
    
    ![Tip](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_tip.png)
    
    Tip If you're familiar with CSS, you can also modify the style of the menu in the site's style sheet.
5. To style the selected menu item, use the [Style pane properties](https://help.salesforce.com/s/articleView?id=platform.siteforce_style_tab_properties.htm&release=264.0.0&type=5 "The Style pane is a visual CSS editor that lets you modify style properties, such as the background color, font size, and border style, as you work with pages and page elements."). Your changes are immediately reflected in the menu.
6. Repeat as required for each part of the menu.

#### See Also

- [Add a Navigation Menu](https://help.salesforce.com/s/articleView?id=platform.siteforce_menu_add.htm&release=264.0.0&type=5 "By default, when you create a menu, it's generated from the pages and site map links in the Site Map folder in the Site Pages view. However, you can also create a menu that's generated from the pages in the Landing Pages folder or from the child or sibling pages of a site page.")
- [About the Site Map and Page Hierarchy](https://help.salesforce.com/s/articleView?id=platform.siteforce_menu_sitemap.htm&release=264.0.0&type=5 "The Site Pages view on the Overview tab contains the pages and site map links of your website. The Site Map folder reflects the hierarchy or tree structure of your site by housing site pages and links that are included in the site map. When you create pages or site map links, they're automatically added to this folder. The Landing Pages folder houses standalone pages that are excluded from the site map, making it ideal for temporary pages, such as promotional or competition pages.")