Seeking Help: How to Create a Top Menu Bar with Dropdown (Smooth Load)

Product Support

AI-generated summary

Steve_John is seeking help to create a smooth top menu bar with dropdowns in Discourse, inspired by sites like Spiceworks and Docker Forums. He’s using the Landing Pages plugin but faces a visual glitch during page load, where the menu briefly appears distorted before rendering correctly. He wants solutions for building a dropdown menu, improving load performance, and linking submenu items to custom HTML pages. mcwumbly and Heliosurge suggest existing Discourse components for header submenus, referencing meta discussions. Steve_John confirms that the provided solutions resolved his issue Steve_John.

1

Hi everyone,

We’re working on implementing a top navigation menu with dropdown functionality—something similar to what’s seen on:

We’re currently using the Landing Pages plugin to build static pages and integrate the menu. However, we’ve encountered a visual issue: when the page loads, the menu briefly appears distorted before realigning—making the transition feel rough and unsmooth.

We’re looking for:

  1. Alternative approaches to build a top menu with dropdowns in Discourse (like in the examples above).
  2. Suggestions to improve the menu rendering performance for a smoother load.
  3. A way to ensure each submenu item can link to its own custom HTML page.

Any insights, code tips, or plugin recommendations would be greatly appreciated!

image
image1116×514 125 KB

Thanks in advance!

2

Is this what you’re looking for? Header Submenus

3

In addition to Dave’s component suggestion there is also this one.

4

Thanks @Heliosurge , @mcwumbly ..this solution worked for me and able to move from this issue…