# Submenus

**Spotlight** allows you to enrich your site's navigation by adding submenus to the primary navigation. This feature enables you to organize your content more hierarchically, making it easier for users to browse through various sections of your site.

#### How to Add a Submenu: <a href="#how-to-add-a-submenu" id="how-to-add-a-submenu"></a>

1. Access the **Settings** > **Navigation** from the admin menu.
2. **Create a New Menu Item**: Add a new item to your primary navigation that will serve as the parent menu. Need to add the # symbol before the name of the navigation item. It should look like this:

   <figure><img src="https://1307692751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc9T47kcwkOR9G8UBf3s8%2Fuploads%2FOs2GK0hRue5lba4MD15k%2Fsubmenu.JPG?alt=media&#x26;token=6bbc78f0-ad88-4b19-82b2-a8c4b150fed9" alt=""><figcaption><p>Parent menu item</p></figcaption></figure>

   If the link in the navigation item is not needed, add instead of the URL # symbol. It should look like this:  &#x20;

   <figure><img src="https://1307692751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc9T47kcwkOR9G8UBf3s8%2Fuploads%2FnethSx7KGZaNMtAqYA0l%2Fsubmenu-01.JPG?alt=media&#x26;token=c354a955-7d6f-4464-a7ea-5b73620fc1aa" alt=""><figcaption></figcaption></figure>
3. **Add Submenu Items**: After the parent menu item, include submenu items as dropdown options, revealed when a user hovers over the parent item. Prefix all submenu items titles with a '-' and a space. Mark the last submenu item with a '+' and a space. It should look like this:

   <figure><img src="https://1307692751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc9T47kcwkOR9G8UBf3s8%2Fuploads%2FrAtvIpKJt2aCqZkANvuR%2Fsubmenu-2.JPG?alt=media&#x26;token=e2d799ed-c5ba-4f49-8a4e-8a8e05bbe401" alt=""><figcaption><p>Set submenu in admin panel</p></figcaption></figure>
4. **That's it!** With those steps completed, you've successfully added a submenu to your site's navigation. This not only structures your content more hierarchically but also enhances the overall user experience by making it easier for visitors to browse through the different sections of your website. Well done! Now, you're all set to organize your site more effectively with this intuitive navigation feature.

<figure><img src="https://1307692751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc9T47kcwkOR9G8UBf3s8%2Fuploads%2FXQi0Jfhk0rESa8F3QMFA%2Fsubmenu-03.jpg?alt=media&#x26;token=a8091fb9-8e34-459b-b103-63113e8656c3" alt=""><figcaption><p>Submenu</p></figcaption></figure>

{% hint style="info" %}
If there are many navigation items, you can add them to the additional menu.&#x20;
{% endhint %}

<figure><img src="https://1307692751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc9T47kcwkOR9G8UBf3s8%2Fuploads%2FzgmKpPnSYjdUZ5Hx8f4B%2Fsubmenu-04.jpg?alt=media&#x26;token=4436a7d4-68bc-4519-aac0-c87a2453843d" alt=""><figcaption></figcaption></figure>

* **Add Additional Menu Items**: Add a new item to your primary navigation that will serve as the parent menu. Need to add the % symbol before the name of the navigation item. Menu items are [added](#how-to-add-a-submenu) in the same way as for the submenu. It should look like this:&#x20;

  <figure><img src="https://1307692751-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fc9T47kcwkOR9G8UBf3s8%2Fuploads%2FgLwcvDAZaLBn2AFC5htw%2Fsubmenu-06.JPG?alt=media&#x26;token=f6a6f368-4ab9-4416-93c5-b29ed586ab06" alt=""><figcaption></figcaption></figure>
