Skip to content

Header menu update #4378

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

Open
ankormoreankor wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Header menu update #4378

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
009a7eb
chore: update header menu content
ankormoreankor Jan 21, 2026
7642819
fixes
ankormoreankor Jan 22, 2026
b8d43e3
update menu titles
ankormoreankor Jan 23, 2026
96bdebc
fixes
ankormoreankor Jan 23, 2026
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
8 changes: 4 additions & 4 deletions src/components/shared/header/mobile-menu/mobile-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import LINKS from 'constants/links';
import MENUS from 'constants/menus';
import { TopbarContext } from 'contexts/topbar-context';
import useMobileMenu from 'hooks/use-mobile-menu';
import ChevronIcon from 'icons/chevron-down.inline.svg';
import ChevronIcon from 'icons/chevron-down-thin.inline.svg';

import Burger from '../burger';
import MenuBanner from '../menu-banner';
Expand Down Expand Up @@ -47,7 +47,7 @@ const MobileMenuItem = ({ text, to, sections, ...otherProps }) => {
>
{text}
{sections && (
<ChevronIcon width={24} height={24} className="ml-auto text-black-pure dark:text-white" />
<ChevronIcon className="ml-auto text-gray-new-30 dark:text-gray-new-70" />
)}
</Tag>
<LazyMotion features={domAnimation}>
Expand Down Expand Up @@ -168,7 +168,7 @@ const MobileMenu = ({ isDocPage = false, docPageType = null }) => {
size="xxs"
tagName="MobileMenu"
>
Log In
Log in
</Button>
<Button
className="h-9 px-[18px]"
Expand All @@ -177,7 +177,7 @@ const MobileMenu = ({ isDocPage = false, docPageType = null }) => {
size="xxs"
tagName="MobileMenu"
>
Sign Up
Sign up
</Button>
</div>
</div>
Expand Down
18 changes: 5 additions & 13 deletions src/components/shared/header/submenu/submenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Submenu = ({
}) => (
<div
className={clsx(
'main-navigation-submenu absolute left-0 top-full z-40 -m-px w-full overflow-hidden',
'main-navigation-submenu absolute left-0 top-full z-40 -mt-px w-full overflow-hidden',
'border-b border-gray-new-20 bg-black-pure',
'transition-[height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)]',
{
Expand Down Expand Up @@ -55,10 +55,7 @@ const Submenu = ({
className="flex w-full gap-x-40 overflow-hidden pb-20 pt-7 xl:gap-x-8"
size="1920"
>
<ul
className="flex gap-x-[128px] pl-[195px] pt-1 xl:gap-x-5 xl:pl-[143px]"
role="menu"
>
<ul className="flex gap-x-[128px] pl-[195px] xl:gap-x-5 xl:pl-[143px]" role="menu">
{sections.map(({ title, items }, sectionIndex) => (
<li key={sectionIndex} role="none">
{title && (
Expand All @@ -79,7 +76,7 @@ const Submenu = ({
{items?.map(({ title, description, to, isExternal }) => (
<li key={title} role="none">
<Link
className={`group ${submenuLinkClassName} -mx-1 -my-3 grid min-w-[224px] gap-y-2 rounded px-1 py-3 text-[13px] leading-tight tracking-snug text-gray-new-60`}
className={`group ${submenuLinkClassName} -mx-1 -my-3 grid min-w-[224px] gap-y-2 rounded px-1 py-3 text-[13px] leading-tight tracking-snug text-gray-new-60 transition-colors duration-200 hover:text-gray-new-80`}
to={to}
isExternal={isExternal}
tagName="Navigation"
Expand All @@ -88,12 +85,7 @@ const Submenu = ({
tabIndex={isActive ? 0 : -1}
onKeyDown={handleSubmenuNavigation(index)}
>
<span
className={clsx(
'flex items-baseline gap-x-1.5 text-lg font-medium leading-none',
'text-white transition-colors duration-200 group-hover:text-gray-new-80'
)}
>
<span className="text-white text-lg font-medium leading-none group-hover:text-gray-new-80">
{title}
</span>
{description}
Expand All @@ -107,7 +99,7 @@ const Submenu = ({
{isProduct && (
<MenuBanner
linkProps={{
className: submenuLinkClassName,
className: clsx('mt-1 xl:mt-0', submenuLinkClassName),
role: 'menuitem',
tabIndex: isActive ? 0 : -1,
onKeyDown: handleSubmenuNavigation(index),
Expand Down
71 changes: 33 additions & 38 deletions src/constants/menus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,11 @@ export default {
to: `${LINKS.useCases}/database-per-tenant`,
description: 'Data isolation without overhead',
},
],
},
{
title: 'Build & Operate',
items: [
{
title: 'Platforms',
to: LINKS.platforms,
Expand All @@ -107,26 +112,6 @@ export default {
},
],
},
{
title: 'For teams',
items: [
{
title: 'Startups',
to: LINKS.startups,
description: 'Build with Neon',
},
{
title: 'Security',
to: LINKS.security,
description: 'Compliance & privacy',
},
{
title: 'Case studies',
to: LINKS.caseStudies,
description: 'Explore customer stories',
},
],
},
],
},
{
Expand All @@ -138,16 +123,41 @@ export default {
to: LINKS.pricing,
},
{
text: 'Company',
text: 'Resources',
sections: [
{
title: 'Company',
title: 'Learn',
items: [
{
title: 'Blog',
to: LINKS.blog,
description: 'Technical posts & product updates',
},
{
title: 'Case studies',
to: LINKS.caseStudies,
description: 'Explore customer stories',
},
{
title: 'Changelog',
to: LINKS.changelog,
description: 'Product updates',
},
{
title: 'Community',
to: LINKS.discord,
description: 'Connect on Discord',
},
{
title: 'Startups',
to: LINKS.startups,
description: 'Build with Neon',
},
],
},
{
title: 'Company',
items: [
{
title: 'About us',
to: LINKS.aboutUs,
Expand All @@ -163,31 +173,16 @@ export default {
to: LINKS.contactSales,
description: 'Get in touch',
},
],
},
{
title: 'Resources',
items: [
{
title: 'Security',
to: LINKS.security,
description: 'Security & compliance portal',
description: 'Compliance & privacy',
},
{
title: 'Status',
to: LINKS.status,
description: 'Service status',
},
{
title: 'Changelog',
to: LINKS.changelog,
description: 'Product updates',
},
{
title: 'Community',
to: LINKS.discord,
description: 'Connect on Discord',
},
],
},
],
Expand Down
4 changes: 4 additions & 0 deletions src/icons/chevron-down-thin.inline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.