Skip to content

feat: dropdown: section flavor for navigation_preview.yml top nav - #3873

Open
theletterf wants to merge 10 commits into
feature/mobile-top-nav-tabsfrom
feature/nav-section-dropdown
Open

feat: dropdown: section flavor for navigation_preview.yml top nav#3873
theletterf wants to merge 10 commits into
feature/mobile-top-nav-tabsfrom
feature/nav-section-dropdown

Conversation

@theletterf

@theletterf theletterf commented Aug 14, 2026

Copy link
Copy Markdown
Member

Summary

  • Adds a dropdown: key to the section: entry shape in navigation_preview.yml
  • A dropdown section renders a panel of links in the top nav bar, with no tree membership and no active-tab state
  • The rendering template (_SecondaryNav.cshtml) and JS (secondary-nav.ts) required no changes — TopNavDropdownItem was already wired up

Demo: https://docs-v3-preview.elastic.dev/elastic/docs-builder/docs/3873

What changed

Config layer (SiteNavigationFile.cs):

  • New SiteDropdownLinkRef(Title, Url) record
  • SiteSectionRef gains DropdownLinks and IsDropdown
  • SiteTableOfContentsCollectionYamlConverter parses dropdown: sequences as {title, url} items

Builder (SectionTopNavBuilder.cs):

  • IsDropdown sections → TopNavDropdownItem with a single flat group; each URL gets the site prefix prepended

navigation_preview.yml: adds a Products dropdown between APIs and Reference, with four solution links as a concrete example

Test: SectionTopNavBuilder_BuildsDropdownTab_WhenDropdownLinksPresent verifies the new path end-to-end

Test plan

  • dotnet test tests/Navigation.Tests/ — 225 passed, 0 failed
  • dotnet build — clean for both Elastic.Documentation.Configuration and Elastic.Documentation.Navigation
  • Preview build with NAVIGATION_PREVIEW=true to confirm the Products dropdown renders in the top nav

🤖 Generated with Claude Code

Extends the section: entry shape in navigation_preview.yml with a dropdown:
key that renders a panel of links instead of navigating to a tree section.

Config layer:
- Add SiteDropdownLinkRef record (title + url)
- Extend SiteSectionRef with DropdownLinks property and IsDropdown flag
- Parse dropdown: sequences in SiteTableOfContentsCollectionYamlConverter;
  each item is a {title, url} mapping

Builder (SectionTopNavBuilder):
- When IsDropdown, prepend the site prefix to each link URL and emit
  a TopNavDropdownItem with a single flat TopNavGroup (null label)

Template (_SecondaryNav.cshtml) and JS (secondary-nav.ts) required no
changes — TopNavDropdownItem rendering and close-on-click behaviour were
already implemented.

navigation_preview.yml: add Products dropdown with four solution links
as a concrete example between the APIs external tab and Reference.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The navigation model may intentionally preserve identical sidebar trees across htmx navigations, so the synthetic should assert the visible target group and only require a fresh DOM node when the tree id changes.

Co-Authored-By: GPT-5.5 <noreply@openai.com>

@reakaleek reakaleek left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need mobile view handling.

@theletterf

Copy link
Copy Markdown
Member Author

@reakaleek Also for the menu itself, right? Let me develop that in a separate PR and stack this one on top.

theletterf and others added 2 commits August 18, 2026 13:16
Top-nav dropdown sections need a mobile presentation inside the compact top-nav menu introduced by the base branch, so grouped links remain reachable on narrow screens.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
Co-Authored-By: GPT-5.5 <noreply@openai.com>
@theletterf

Copy link
Copy Markdown
Member Author

@reakaleek Added a mobile mechanism. WDYT?

Keep dropdown top-nav groups inside the mobile pages drawer after stacking on the updated base branch.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
Restore the mobile TOC trigger alignment now that version controls live inside the drawer.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
Render the mobile-only pages drawer trigger on the docs landing page so section and version controls remain reachable there.

Co-Authored-By: GPT-5.5 <noreply@openai.com>
@reakaleek

Copy link
Copy Markdown
Member

@reakaleek Added a mobile mechanism. WDYT?

I think it looks good. But I was thinking of something less invasive.

Like keeping the buttons as is but grouping the last 3 into a dropdown with the label (3 more) or something like that

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants