[fix] Allow empty section pages in top navigation similar to how we do it for sidebar nav by nico-bellante · Pull Request #12247 · streamlit/streamlit

nico-bellante · 2025-08-16T05:57:04Z

Summary

This PR fixes issue #12243 where pages with empty section headers ("") were incorrectly grouped in an unlabeled dropdown in the top navigation. They now appear as individual navigation items when mixed with sectioned pages, matching the behavior of sidebar navigation.

Changes

Added shared navigation utilities (processNavigationStructure) to ensure consistent handling of empty sections between TopNav and SidebarNav components
Refactored TopNav to use the shared utilities, fixing the bug where empty section pages were grouped incorrectly
Refactored SidebarNav to use the same shared utilities for consistency
Updated test IDs to properly distinguish between individual nav links and dropdown sections
Added comprehensive tests:
- Unit tests for all navigation utilities
- E2E test specifically for the mixed empty/named sections scenario

There's a couple suggestions @sfc-gh-dmatthews made that I think would be great here, but going to do in a follow up PR for easier review.

Accept more than just "". Inspiration: https://docs.streamlit.io/develop/concepts/multipage-apps/overview#how-streamlit-converts-filenames-into-labels-and-titles We should allow various "empty" keys so that users can eventually place the single pages where they want (see idea 2)
Once we can have multiple empty keys, we can allow the positioning of the single pages among sections should the developer choose to do so.

Another followup task could be to change what's getting screenshotted in the test app, or change the test app to use query params instead of checkboxes to avoid snap diffs on changing the options in the test app.

Testing

Added unit tests for utils and changed functionality. Added e2e tests. Manually verified.

Before/After

Before: Pages with empty section headers appeared in an unlabeled dropdown
After: Pages with empty section headers appear as individual navigation items

Example Usage

import streamlit as st

# These pages will appear as individual items in top nav
pages = {
    "": [
        st.Page("home.py", title="Home"),
        st.Page("dashboard.py", title="Dashboard"),
    ],
    "Admin": [
        st.Page("settings.py", title="Settings"),
        st.Page("users.py", title="Users"),
    ],
}

st.navigation(pages, position="top")

Fixes #12243

🤖 Generated with Claude Code

snyk-io · 2025-08-16T05:57:12Z

🎉 Snyk checks have passed. No issues have been found so far.

✅ security/snyk check is complete. No issues have been found. (View Details)

✅ license/snyk check is complete. No issues have been found. (View Details)

frontend/app/src/components/Navigation/SidebarNav.tsx

frontend/lib/src/components/widgets/DataFrame/columns/SelectboxColumn.ts

lib/streamlit/elements/lib/column_types.py

Copilot

Pull Request Overview

This PR fixes issue #12243 where pages with empty section headers ("") were incorrectly grouped in an unlabeled dropdown in the top navigation. The fix ensures that empty section pages appear as individual navigation items when mixed with sectioned pages, matching the behavior of sidebar navigation.

Added shared navigation utilities to ensure consistent handling of empty sections between TopNav and SidebarNav components
Refactored TopNav and SidebarNav to use the same shared processing logic
Updated test IDs to properly distinguish between different navigation contexts

Reviewed Changes

Copilot reviewed 10 out of 54 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`frontend/app/src/components/Navigation/utils.ts`	Added shared navigation processing utilities for consistent handling of empty sections
`frontend/app/src/components/Navigation/utils.test.ts`	Added comprehensive unit tests for the new navigation utilities
`frontend/app/src/components/Navigation/TopNav.tsx`	Refactored to use shared utilities and fix empty section handling
`frontend/app/src/components/Navigation/TopNavSection.tsx`	Updated test IDs and added dropdown context parameter
`frontend/app/src/components/Navigation/SidebarNavLink.tsx`	Enhanced test ID logic to distinguish dropdown links from regular nav links
`frontend/app/src/components/Navigation/SidebarNav.tsx`	Refactored to use shared utilities and removed navSections prop
`frontend/app/src/components/Navigation/SidebarNav.test.tsx`	Updated tests to work with refactored component interface
`frontend/app/src/components/Sidebar/Sidebar.tsx`	Removed obsolete navSections prop from SidebarNav
`e2e_playwright/multipage_apps_v2/mpa_v2_top_nav.py`	Added test case for mixed empty and named sections
`e2e_playwright/multipage_apps_v2/mpa_v2_top_nav_test.py`	Added comprehensive E2E tests for mixed section navigation

frontend/app/src/components/Navigation/utils.ts

e2e_playwright/multipage_apps_v2/mpa_v2_top_nav_test.py

lukasmasuch · 2025-09-11T11:49:27Z

e2e_playwright/multipage_apps_v2/mpa_v2_basics_test.py

at the root level.

and always on the top of the nav menu, right?

For now, yes. @sfc-gh-dmatthews had some thoughts about expanding on this further and allowing multiple different empty keys and allowing you to intermix so lets say the first section is "" and then next is "Section A" and then after section a is "_" or " " or "undefined" and then "Section B" allowing you to interweave the sections and pages. I think the sidebar design might need some work to make this look good, so I held off adding that in this PR.

frontend/app/src/components/Navigation/utils.ts

lukasmasuch

LGTM 👍 One clarification question

This file provides essential information for Claude Code instances working with the Streamlit codebase, including common commands, architecture overview, and development patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

Pages with empty section headers ("") now appear as individual items in the top navigation bar when mixed with sectioned pages, matching the behavior of sidebar navigation. Changes: - Add shared navigation utilities to process nav structure consistently - Refactor TopNav to use shared utilities, fixing the unlabeled dropdown bug - Refactor SidebarNav to use shared utilities for consistency - Update test IDs to distinguish nav links from dropdown sections - Add E2E test for mixed empty/named sections scenario - Add comprehensive unit tests for navigation utilities 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

…gression tests

…d reliability

…sers

…WebKit

…larify purpose and scope

sfc-gh-nbellante requested a review from Copilot August 16, 2025 05:59

This comment was marked as outdated.

Sign in to view

sfc-gh-nbellante added security-assessment-completed change:bugfix PR contains bug fix implementation impact:users PR changes affect end users labels Aug 19, 2025

graphite-app bot reviewed Aug 19, 2025

View reviewed changes

frontend/app/src/components/Navigation/SidebarNav.tsx Outdated Show resolved Hide resolved

frontend/lib/src/components/widgets/DataFrame/columns/SelectboxColumn.ts Outdated Show resolved Hide resolved

sfc-gh-nbellante self-assigned this Aug 19, 2025

graphite-app bot reviewed Aug 20, 2025

View reviewed changes

lib/streamlit/elements/lib/column_types.py Outdated Show resolved Hide resolved

sfc-gh-nbellante force-pushed the feature/top-nav-individual-pages branch from f52e3ab to dfa5aa7 Compare August 20, 2025 19:44

lukasmasuch mentioned this pull request Aug 31, 2025

Allow mixed flat + grouped navigation in st.navigation when position="top" #12381

Closed

2 tasks

sfc-gh-nbellante changed the title ~~Fix empty section pages in top navigation (issue #12243)~~ [fix] Allow empty section pages in top navigation similar to how we do it for sidebar nav Sep 3, 2025

sfc-gh-nbellante requested a review from Copilot September 4, 2025 16:08

Copilot AI reviewed Sep 4, 2025

View reviewed changes

frontend/app/src/components/Navigation/utils.ts Outdated Show resolved Hide resolved

frontend/app/src/components/Navigation/utils.ts Outdated Show resolved Hide resolved

sfc-gh-nbellante force-pushed the feature/top-nav-individual-pages branch from 2d85ef4 to 3bf71fc Compare September 4, 2025 16:58

graphite-app bot reviewed Sep 5, 2025

View reviewed changes

e2e_playwright/multipage_apps_v2/mpa_v2_top_nav_test.py Outdated Show resolved Hide resolved

lukasmasuch reviewed Sep 11, 2025

View reviewed changes

frontend/app/src/components/Navigation/utils.ts Outdated Show resolved Hide resolved

lukasmasuch approved these changes Sep 11, 2025

View reviewed changes

nico and others added 11 commits September 11, 2025 07:53

Fix lint issues: format Python and frontend code

ef57759

fixing

414e5d4

snaps and some more changes

a4aef36

updating test

93abe4c

tweaking

3463ccf

fixing type

b28329f

updating snaps

027a900

refactor: update generateNavSections to return updated page count

309e247

rerun workflows

2dd058b

sfc-gh-nbellante added 14 commits September 11, 2025 07:56

target snaps better

cde423d

improve visibility checks for dropdown links in top navigation tests

2646abe

refactor: improve selector for popover container in top nav visual re…

974f707

…gression tests

refactor: update popover selector in top navigation tests for improve…

b7a4d66

…d reliability

chore: update snapshot images for top navigation popovers across brow…

d92bc81

…sers

adding more tests

0418191

adding some snaps

8200bdb

adding new line

f1b14fc

test: add sidebar navigation tests for mixed and empty sections

e870701

fix types

4a8c7cd

refactor: remove type ignore comment from navigation configuration

121ba33

Add snapshot for mpa-sidebar_nav_mixed_sections in light theme using …

823a619

…WebKit

doc: enhance docstring for mixed_sections_visual_regression test to c…

24c9e59

…larify purpose and scope

remove "undefined"

e9379cc

sfc-gh-nbellante force-pushed the feature/top-nav-individual-pages branch from 9fe1142 to e9379cc Compare September 11, 2025 14:57

fix lint

81bed7b

sfc-gh-nbellante merged commit 029b3e4 into streamlit:develop Sep 11, 2025
37 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] Allow empty section pages in top navigation similar to how we do it for sidebar nav #12247

[fix] Allow empty section pages in top navigation similar to how we do it for sidebar nav #12247
sfc-gh-nbellante merged 26 commits intostreamlit:developfrom
nico-bellante:feature/top-nav-individual-pages

nico-bellante commented Aug 16, 2025 •

edited by sfc-gh-nbellante

Loading

Uh oh!

snyk-io bot commented Aug 16, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lukasmasuch Sep 11, 2025

Uh oh!

sfc-gh-nbellante Sep 11, 2025

Uh oh!

Uh oh!

lukasmasuch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

nico-bellante commented Aug 16, 2025 • edited by sfc-gh-nbellante Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Testing

Before/After

Example Usage

Uh oh!

snyk-io bot commented Aug 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎉 Snyk checks have passed. No issues have been found so far.

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lukasmasuch Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

sfc-gh-nbellante Sep 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lukasmasuch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

nico-bellante commented Aug 16, 2025 •

edited by sfc-gh-nbellante

Loading

snyk-io bot commented Aug 16, 2025 •

edited

Loading