# Submenus

**Hype** 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. Insert # before the menu item name. It should look like this:&#x20;

    <figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FvOpLd0NqWxxxCFvfa2y3%2F1.jpg?alt=media&#x26;token=ab5589e5-73c7-4ca7-8794-9a567b8f8919" alt=""><figcaption><p>Parent menu item without link</p></figcaption></figure>



    <figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FMA7mAxFaBWgx3gX2sK7O%2F2.jpg?alt=media&#x26;token=1e2a62f2-ad0a-4e12-8913-998fa7ff6a97" alt=""><figcaption><p>Parent menu item with link</p></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:&#x20;

    <figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FEvEOYzD07rsZY5Ap5Wsr%2Fhype.highfivethemes.com_ghost_%20(6).png?alt=media&#x26;token=3dda44da-69d9-4c31-ba6e-21611e2057c4" 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://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FSvrd0SxdEHcWrViBSg4v%2Fhype.highfivethemes.com_%20(4).png?alt=media&#x26;token=3181d123-cf88-4f1f-85cb-f9a14e63a9d9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FMIHtGecZQxJbFSnFQRUW%2Fhype.highfivethemes.com_%20(3).png?alt=media&#x26;token=3e547c75-319c-4d68-8c42-a5c1e25f3503" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
To add a marker to a menu item, add styles to the code injection, by changing the selector name.&#x20;

`.submenu__item-link--featured-post::after { content: 'Hot'; }`&#x20;
{% endhint %}

<figure><img src="https://609546565-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEtsGfsW99UrVt2tgoUZE%2Fuploads%2FwAUtxSmdIEfHWCVopuoQ%2Fcode-inj-nav-before.jpg?alt=media&#x26;token=095112fb-1fb3-4762-9670-68b7d7221387" alt=""><figcaption></figcaption></figure>
