Skip to content

feat: Add Products dropdown and Solutions dropdown to navbar #1703

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Alek99 wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

feat: Add Products dropdown and Solutions dropdown to navbar #1703

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6f74a8d
feat: Add Products dropdown and Solutions dropdown to navbar
Alek99 Dec 5, 2025
0b7a010
Add demo card to Solutions dropdown menu with improved formatting and…
Alek99 Dec 5, 2025
9f18d34
Merge branch 'main' into navbar-products-solutions-dropdown
Alek99 Dec 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
280 changes: 229 additions & 51 deletions pcweb/components/docpage/navbar/navbar.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
from pcweb.pages.framework.framework import framework
from pcweb.pages.hosting.hosting import hosting_landing
from pcweb.pages.use_cases.use_cases import use_cases_page
from pcweb.pages.use_cases.finance_use_case import finance_use_case_page

from ...link_button import resources_button
from ..sidebar import SidebarState
Expand Down Expand Up @@ -64,6 +65,14 @@ def link_item(name: str, url: str, active_str: str = ""):
elif active_str == "hosting" or active_str == "cloud":
active = router_path.contains("cloud") | router_path.contains("hosting")

elif active_str == "products":
is_docs = router_path.contains("docs")
is_open_source_page = router_path.contains("open-source")
not_cloud = ~(router_path.contains("cloud") | router_path.contains("hosting"))
not_ai_builder = ~router_path.contains("ai-builder")
is_framework = (is_docs & not_cloud & not_ai_builder) | is_open_source_page
active = router_path.contains("ai-builder") | router_path.contains("cloud") | router_path.contains("hosting") | is_framework

elif active_str == "pricing":
active = router_path.contains("pricing")

Expand Down Expand Up @@ -344,20 +353,151 @@ def _resource_section_column(
)


def solutions_section():
_app_types_items = [
{
"label": "Internal Tools",
"url": use_cases_page.path,
"icon": "Settings01Icon",
},
{
"label": "Data & AI",
"url": use_cases_page.path,
"icon": "Database02Icon",
},

{
"label": "External Apps",
"url": use_cases_page.path,
"icon": "UserGroupIcon",
},
]

_industries_items = [
{
"label": "Finance",
"url": finance_use_case_page.path,
"icon": "CreditCardPosIcon",
},
{
"label": "Healthcare",
"url": use_cases_page.path,
"icon": "HealthIcon",
},

{
"label": "Consulting",
"url": use_cases_page.path,
"icon": "ZapIcon",
},
{
"label": "Enterprise",
"url": use_cases_page.path,
"icon": "Building01Icon",
},
]

def _link_button(label: str, url: str, icon: str) -> rx.Component:
return rx.el.a(
resources_button(
ui.icon(icon, size=16, class_name="flex-shrink-0"),
label,
size="md",
variant="transparent",
class_name="justify-start w-full items-center gap-3",
),
to=url,
class_name="w-full",
)

def _solutions_section_column(
section_title: str, solution_item: list[dict[str, str]]
):
return rx.box(
rx.box(
rx.text(
section_title,
class_name="text-sm text-slate-12 font-semibold px-2.5 py-1 pb-2",
),
*[
_link_button(item["label"], item["url"], item["icon"])
for item in solution_item
],
class_name="flex flex-col w-full p-2",
),
class_name="flex flex-col w-full max-w-[9.1875rem]",
)

return ui.navigation_menu.content(
_solutions_section_column("App Types", _app_types_items),
_solutions_section_column("Industries", _industries_items),
# Grid card
rx.box(
rx.el.a(
rx.box(
rx.text(
"Get a personalized demo for your company",
class_name="text-slate-12 text-base font-semibold break-words leading-tight flex-1 min-w-0",
),
rx.el.button(
rx.icon("chevron-right", class_name="text-secondary-11 size-4"),
class_name="size-6 group-hover:bg-secondary-3 transition-colors rounded-md flex items-center justify-center flex-shrink-0 mt-0.5",
),
class_name="flex flex-row items-start gap-2 justify-between mb-1 w-full",
),
rx.text(
"See how Reflex can help your team build apps.",
class_name="text-secondary-11 text-sm font-medium break-words leading-relaxed w-full",
),
to="/pricing",
class_name="w-[16.5rem] h-full rounded-md shadow-small bg-white-1 border border-slate-4 flex flex-col gap-2.5 pt-6 pb-4 pl-5 pr-6 relative border-solid group overflow-hidden",
),
class_name="flex flex-col pt-4 pb-2 pl-3 pr-6 bg-slate-1 flex-shrink-0 overflow-hidden h-full",
),
unstyled=True,
class_name=ui.cn(
ui.navigation_menu.class_names.CONTENT,
"flex flex-row gap-4 rounded-xl w-[37rem] font-sans overflow-hidden pt-1.5 pb-1.5 pl-1.5 pr-3",
),
)


def new_menu_trigger(
title: str, url: str | None = None, active_str: str = ""
) -> rx.Component:
if url:
return ui.navigation_menu.trigger(link_item(title, url, active_str))

router_path = rx.State.router.page.path
active = False

if active_str == "products":
is_docs = router_path.contains("docs")
is_open_source_page = router_path.contains("open-source")
not_cloud = ~(router_path.contains("cloud") | router_path.contains("hosting"))
not_ai_builder = ~router_path.contains("ai-builder")
is_framework = (is_docs & not_cloud & not_ai_builder) | is_open_source_page
active = router_path.contains("ai-builder") | router_path.contains("cloud") | router_path.contains("hosting") | is_framework
elif active_str:
active = router_path.contains(active_str)

common_cn = "p-[1.406rem_0px] font-medium text-sm transition-colors"
active_cn = "shadow-[inset_0_-0.5px_0_0_var(--c-violet-9)] text-violet-9 group-hover:text-violet-9"
unactive_cn = "shadow-none text-secondary-11 group-hover:text-secondary-12"

return ui.navigation_menu.trigger(
rx.box(
rx.text(
title,
class_name="p-[1.406rem_0px] font-medium text-sm text-secondary-11 group-hover:text-secondary-12 transition-colors",
class_name=common_cn + " " + rx.cond(active, active_cn, unactive_cn),
),
rx.icon(
"chevron-down",
class_name="chevron size-5 !text-secondary-11 group-hover:!text-secondary-12 py-1 mr-0 transition-all ease-out",
class_name=rx.cond(
active,
"chevron size-5 !text-violet-9 group-hover:!text-violet-9 py-1 mr-0 transition-all ease-out",
"chevron size-5 !text-secondary-11 group-hover:!text-secondary-12 py-1 mr-0 transition-all ease-out",
),
aria_hidden="true",
),
class_name="flex-row items-center gap-x-1 group user-select-none cursor-pointer xl:flex hidden",
Expand Down Expand Up @@ -419,6 +559,80 @@ def doc_section():
)


def products_section():
from pcweb.pages.docs import ai_builder as ai_builder_pages
from pcweb.pages.docs import hosting as hosting_page

return rx.cond(
rx.State.router.page.path.contains("docs")
| rx.State.router.page.path.contains("ai-builder")
| rx.State.router.page.path.contains("cloud"),
ui.navigation_menu.content(
resource_item(
"AI Builder",
ai_builder_pages.overview.best_practices.path,
"MagicWand01Icon",
0,
),
resource_item(
"Open Source",
getting_started.introduction.path,
"SourceCodeCircleIcon",
0,
),
resource_item(
"Cloud",
hosting_page.deploy_quick_start.path,
"CloudServerIcon",
0,
),
unstyled=True,
class_name=ui.cn(
ui.navigation_menu.class_names.CONTENT,
"flex flex-col gap-1.5 m-0 p-1.5 w-[280px] min-w-max h-auto",
),
),
ui.navigation_menu.content(
rx.el.a(
rx.box(
ui.icon("MagicWand01Icon", size=16, class_name="flex-shrink-0 text-secondary-11"),
rx.text(
"AI Builder",
class_name="font-small text-secondary-11 truncate text-start w-[150px]",
),
rx.icon(
tag="chevron_right",
size=14,
stroke_width=2,
class_name="flex-shrink-0 text-slate-8 ml-auto",
),
class_name="flex flex-row flex-nowrap items-center gap-4 hover:bg-secondary-3 px-[1.125rem] py-2 rounded-md w-full transition-colors",
),
class_name="w-full text-secondary-11 hover:text-secondary-11",
href=REFLEX_BUILD_URL,
is_external=True,
),
resource_item(
"Open Source",
framework.path,
"SourceCodeCircleIcon",
0,
),
resource_item(
"Cloud",
hosting_landing.path,
"CloudServerIcon",
0,
),
unstyled=True,
class_name=ui.cn(
ui.navigation_menu.class_names.CONTENT,
"flex flex-col gap-1.5 m-0 p-1.5 w-[280px] min-w-max h-auto",
),
),
)


def new_component_section() -> rx.Component:
from pcweb.pages.docs import ai_builder as ai_builder_pages
from pcweb.pages.docs import hosting as hosting_page
Expand Down Expand Up @@ -446,56 +660,14 @@ def new_component_section() -> rx.Component:
unstyled=True,
),
),
rx.cond(
rx.State.router.page.path.contains("docs")
| rx.State.router.page.path.contains("ai-builder")
| rx.State.router.page.path.contains("cloud"),
ui.navigation_menu.list(
ui.navigation_menu.item(
render_=link_item(
"AI Builder",
ai_builder_pages.overview.best_practices.path,
"builder",
),
unstyled=True,
),
ui.navigation_menu.item(
render_=link_item(
"Open Source",
getting_started.introduction.path,
"framework",
),
unstyled=True,
class_name="whitespace-nowrap",
),
ui.navigation_menu.item(
render_=link_item(
"Cloud", hosting_page.deploy_quick_start.path, "hosting"
),
unstyled=True,
),
class_name="xl:flex hidden flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
),
ui.navigation_menu.list(
ui.navigation_menu.item(
render_=link_item(
"AI Builder",
REFLEX_BUILD_URL,
"builder",
),
unstyled=True,
),
ui.navigation_menu.item(
render_=link_item("Open Source", framework.path, "framework"),
class_name="whitespace-nowrap",
unstyled=True,
),
ui.navigation_menu.item(
render_=link_item("Cloud", hosting_landing.path, "hosting"),
unstyled=True,
),
class_name="xl:flex hidden flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
ui.navigation_menu.list(
ui.navigation_menu.item(
new_menu_trigger("Product", active_str="products"),
products_section(),
class_name="cursor-pointer",
unstyled=True,
),
class_name="xl:flex hidden flex-row items-center gap-0 lg:gap-5 2xl:gap-7 m-0 h-full list-none",
),
ui.navigation_menu.item(
new_menu_trigger("Docs"),
Expand All @@ -516,6 +688,12 @@ def new_component_section() -> rx.Component:
class_name="cursor-pointer",
unstyled=True,
),
ui.navigation_menu.item(
new_menu_trigger("Solutions", active_str="use-cases"),
solutions_section(),
class_name="cursor-pointer",
unstyled=True,
),
ui.navigation_menu.item(
ui.navigation_menu.item(
render_=link_item(
Expand Down
Loading