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. 🤠🤠ðŸ¤
(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".
<!-- Dropdown Menu -->
<script src="https://cdn.jsdelivr.net/gh/rakihub/[email protected]/nested-menu/built/nested-menu.min.js" defer></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rakihub/[email protected]/nested-menu/built/nested-menu.min.css">
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
Done! Now you can see the dropdown menu in your Ghost blog.
Dropdown Menu Pro
The above dropdown menu has room for improvement, for example, on mobile screens, the menu floats instead of fitting naturally into the layout, and the arrow icon could be more refined.
Dropdown Menu Pro offers a more polished solution 👇
It not only features a more elegant icon but also integrates smoothly into the natural flow of mobile menus. A one-time purchase gives you lifetime access to Dropdown Menu Pro.
The Dropdown Menu Pro works with all official Ghost themes. If you need it for other themes, please contact us at 📮 [email protected]. The price remains the same.
