Added ASF-required links using drop-down menu and unified navigation

[zka26]

• You've read the Contributor Guide and Code of Conduct.
• You've included unit or integration tests for your change, where applicable.
• You've included inline docs for your change, where applicable.
• There's an open issue for the PR that you are making. If you'd like to propose a change, please open an issue to discuss the change or find an existing issue.

Added ASF-required links via dropdown and unified navigation.

Fixes #1186

Description

This change attempts to standardize the navbar with the newly introduced ASF menus across the Site and Apidocs and, to fix any sort of layout glitches and to improve zoom and resize and to address and solve problem that could have arisen from what was changed. DevTools were used to ensure that everything works accordingly.

General Design:

• Mobile < 768
• 769 < Compact < 1199
• (New) 768 =< Wrap < 1200
• 1200 <= Desktop

Desktop: Classic horizontal navigation bar extended with the ASF drop-down menu upon hover. The header is fixed when scrolling.

Mobile: Center-aligned column menu with a tap/click-to-open ASF accordion.

Compact: Transition in-between Mobile and Desktop for legacy resolutions (or maybe some tablets). It uses the hamburger menu already and the header is no longer fixed when scrolling focusing on the visibility of the content while the ‘Table of Content’ still appears as the left sidebar, and to a certain point the ‘In this Article’ appears as the right sidebar.

(New) Wrap: Reintroduced that the navbar items ( + searchbar) wraps under the logo.

Improvements:

• Unified navigation: Same feel and look across the Site and Apidocs.
• Compact mode (with new breakpoints): When the single classic horizontal navigation bar is no longer possible, we turn to the hamburger menu to prevent the header covering up too much of the content.
  (New) Wrap mode instead of the compact mode. The buttons' heights were decreased slightly.
• Ribbon safety: Keeps the hamburger menu clear of the “Fork me on GitHub” ribbon, so it is always accessible, never covered by it.
• [Apidocs-Only] Search overlay: In-between 1400px and 1200px instead of the base search function, we temporarily introduce a search button to open an overlay, therefore delaying the need to switch to hamburger (or multi-line) too early, and Apidocs can switch to it at the same time as the Site.

Previews

Site:

Site - Desktop

Site - Wrap

Site - Mobile

Apidocs:

Apidocs - Desktop:

Apidocs - Wrap:

Apidocs - Mobile:

[NightOwl888]

Thanks for the PR.

This looks good. However, note that the "website" is actually 2 websites, one generated in a subfolder of the other. They share common elements such as CSS styles and the footer.

Option 1: Include links in Footer

This only changes the site folder, but the apidocs folder also has files that contribute to the same website footer.

The two main places to update on the apidocs site are:

• https://github.com/apache/lucenenet/blob/master/websites/apidocs/docfx.json#L585
• https://github.com/apache/lucenenet/blob/master/websites/apidocs/docs.ps1#L107

But we also need to keep in mind that the footer does an auto-hide, so maybe that is not the best place to put these links.

Option 2: Include links on Home Page Only

I took another look at the requirements and it specifically states that the links are only required to be on the home page. So, we could technically add a section only to that one page, in which case there is only one site to update.

Examples

Here are some examples of how some other projects integrated the links:

• https://opennlp.apache.org/ - drop down from the top menu
• https://activemq.apache.org/ - drop down from the top menu
• https://accumulo.apache.org/ - events on the side bar, other links integrated elsewhere

---

Personally, I like the idea of a dropdown at the top like the first two examples. But this does meet the requirements and I don't object to anything except the fact that the footers should not diverge on the 2 websites to keep the same look and feel. So, if you fix the other footer, this works for me.

@paulirwin - Thoughts?

NOTE: I noticed that the docs always has a pancake menu. It should expand to show the 3 menu items across the top when the viewport is wide enough, so if we add a "The ASF" link in the top menu, that issue will also need to be addressed.

[paulirwin]

I do like the dropdown in the header, but I'm also okay with the footer for now.

The header is already wrapping on smaller resolutions, like the tablet I'm using now. If we do the header change, maybe we could move Contributing under Documentation, and Download under About (or remove Download, if possible, since most people are probably using NuGet).

But, I know this is a Hacktoberfest item, so I'm also cool with taking the quickest path to victory here.

[NightOwl888]

remove Download, if possible, since most people are probably using NuGet

An Apache release is source code, so these pages are required to download the official releases. The pre-built binaries and packages are technically only provided on NuGet for convenience (at least in Apache's eyes).

https://infra.apache.org/release-publishing.html#valid

That said, IIRC there is an official .cgi file that we could style that would dynamically show the releases on Apache's archives.

[paulirwin]

I didn't mean to remove the page itself; just the link in the header. I don't think it needs that level of prominence.

[zka26]

Thanks a lot for the detailed feedback and the examples! I would like to work on it and do it the right way, using drop-down approach in the header and try adjusting the menu layout while testing on smaller screen. I will work on that and update the PR accordingly and at the end we can see, if anything else needs to be done, more than glad to contribute! Thank you for the guidance again!

[NightOwl888]

@zka26 - I noticed this is still marked as a draft PR. Do you have more work to do or is this ready for review?

Note that the EditorConfig checker also caught some issues with extra trailing whitespace.

[zka26]

@NightOwl888 - Sorry for the late reply and thanks for checking in! The work is nearly complete. I've extended the navbars with the ASF dropdown menu, adding links for both the main site and the apidocs, and have worked to make them look and behave uniformly in both the pancake and desktop modes.

I'm just putting on the final touches now, fixing a small issue in the apidocs part and reverting some changes in the site part to ensure they look and feel more alike.

Thanks for the heads-up about the trailing whitespaces—I've eliminated them.

I plan to commit the finalized version, edit the PR description, and set it for review in about 10 hours.

Edit: Sorry! The 10 hours became much more hours. I reworked the site and almost the apidocs is ready too. I will do my best to submit it today (10.10 Friday)

[zka26]

Sorry, this took longer than expected. The learning curve was trickier than I thought and I decided to restart a few times. I added the ASF-required links via dropdown and unified the navs. I significantly reworked the main.css and main.js files (added main.js for the Site). I tested across viewports/zoom in DevTools to address issues. On the Apidocs, there is a compact search overlay between 1200-1399px to keep a single-line navbar and match the Site. I hope the result feels clean and consistent.
If anything should be reverted, adjusted, included or excluded, please let me know!
I am happy to improve it and take your recommendation.

Edit: Please take all the time you need on the review. Hacktoberfest isn’t a deadline for me.

[NightOwl888]

Thanks. This looks really good. I checked both the website and docs site and they now look more uniform than they did before.

My only minor quibble is that the top menu used to wrap under the logo when the viewport got too small so it didn't collapse to a pancake until it got to the smallest width. Now it switches to a pancake menu when it goes below the maximum viewport size.

Before

Now

Can you fix that so it will wrap again?

[zka26]

The wrapping was restored and tried to fine tune the behaviors so they always respond good and clean at every width before transitioning either to the Desktop or the Mobile mode.

Edit: Updated the PR description accordingly and included new screenshots with the wrapping as well.

[NightOwl888]

Thanks. This looks really good.

[paulirwin]

@zka26 Thanks for the contribution!

[NightOwl888]

FYI - these changes are now live. Thanks again for the contribution.

After I deployed the site, I realized there were 2 barely noticeable style issues on the API docs site.

1. The ASF dropdown menu only appears on the home page of the docs site, not any of the other pages, like Lucene.Net.Analysis.Common.
2. The breadcrumb menu used to begin with "API /" and then every breadcrumb would follow. But now the "API" part is on its own line and the rest of the breadcrumb appears below it. To see what I mean, compare ArabicNormalizationFilterFactory on 4.8.0-beta00017 with ArabicNormalizationFilterFactory on 4.8.0-beta00016.

Feel free to submit another PR to fix these, but as far as Apache is concerned we have fixed the ASF menu issue because it was only required on the home page of the main site.

The right menu is also missing from the 4.8.0-beta00017 docs (the part that indexes the current page), but I think that may be a docfx config issue instead of a style issue.

[paulirwin]

@NightOwl888 Am I missing something? I don't see the ASF menu on the homepage (https://lucenenet.apache.org/index.html), only on the beta 17 docs pages.

Also note that there is an issue on Firefox on the beta 17 docs layout where the top bar is covering up the right-hand side links:

[NightOwl888]

@paulirwin

You probably need to do a CTRL + F5 to refresh your browser cache.

[paulirwin]

Wow, that was aggressively cached. I had done that but it didn't work the first time. Great to see this is live!

However, the Whimsy checks are still failing as of this morning. We'll need to dig in to figure out why, but as long as we actually have the links there, at least we're meeting the requirement. Or, perhaps they are having a caching issue too that will eventually clear. https://whimsy.apache.org/site/project/lucenenet

[NightOwl888]

It says it already crawled it today:

Last crawl time: Sun, 02 Nov 2025 16:12:29 GMT over 219 websites.

So apparently the crawler is also unable to bust the cache. So, we either need to wait for the cache to expire or contact INFRA to have them force it. Let's see if the next crawl updates it first, though.

I also noticed that our "events" link doesn't match the regex that they supplied.

^https?://((www\.)?apache\.org/events/current-event|events\.apache\.org|www\.apachecon\.com/event-images/snippet\.js)

Oddly, the events page we linked to looks nicer than any of the pages in the regex. Maybe the docs are wrong on this, though.