The Easiest Way to Add a Dropdown Menu in Ghost

The easiest way to add dropdown menu into your Ghost blog!

I have tested this method with all official free Ghost themes, it works on desktop and phone screens! So don't hesitate, give it a try. 🤠🤠🤠

The dropdown menu in the main menu bar of this blog serves as an example of what we'll build.

(Although we have tried our best to test it, the menu bar in Ghost highly depends on the theme being used, so your experience may vary.) If this method doesn't work for you, please contact us at 📮 [email protected]. We are happy to help.

Add Code to the 'Site header'

Navigate to Settings-->Advanced-->Code injection, copy and paste the following code into the "Site header". It adds custom styles for the dropdown menu.

<!-- Dropdown Menu -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@main/nested-menu/built/nested-menu.min.css">

While still in settings-->Advanced-->Code injection, copy and paste the following code into the "Site footer". This will initialize the dropdown menu script.

<!-- Dropdown Menu -->
<script src="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@main/nested-menu/built/nested-menu.min.js"></script>

Add A Dropdown Menu in 'Navigation'

To add a dropdown menu, we need to add a main menu item which shows in main menu bar and some menu items as children of the main menu item:

  • Navigate to Settings-->Site-->Navigation
  • Add a new item label followed by [has-child] to create a main menu item
  • Add new item labels followed by [child] to create nested menu items

dropdown-menu-1.png

Done! Now you can see the dropdown menu in your Ghost blog. If you have any questions, please contact us at 📮 [email protected].