Skip to content

new-nav: Redesign top navigation links and labels #3318

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

Merged
mich-elle-luna merged 4 commits into from
May 15, 2026
+39 −100
Merged

new-nav: Redesign top navigation links and labels #3318

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
8e78194
new-nav: Redesign top navigation links and labels
mich-elle-luna May 13, 2026
8e13fa4
new-nav: Fix mobile TypeError from orphaned data-products-mobile-menu…
mich-elle-luna May 13, 2026
bfed7bf
new-nav: Lowercase 'agent' in AI agent builder nav label
mich-elle-luna May 14, 2026
41f411d
new-nav: Slim down footer
mich-elle-luna May 15, 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
57 changes: 8 additions & 49 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<footer
class="relative z-50 flex justify-center bg-redis-ink-900 px-0 py-24 text-gray-300 border-t border-t-white border-opacity-30 text-[13px] font-sans">
class="relative z-50 flex justify-center bg-redis-ink-900 px-0 py-10 text-gray-300 border-t border-t-white border-opacity-30 text-[13px] font-sans">
<div class="flex w-full max-w-7xl flex-col gap-6 px-4 md:flex-row lg:px-8">
<div class="flex flex-col gap-8 md:max-w-[40%] md:flex-[40%]">
<a class="relative hover:text-white w-[82px] mb-4" href="https://redis.io/">
Expand Down Expand Up @@ -31,49 +31,17 @@
</a>
</div>
</div>
<div class="hidden flex-col gap-4 md:flex">
<div class="hidden flex-row flex-wrap gap-x-6 gap-y-2 md:flex">
<a class="hover:text-white" href="https://trust.redis.io/">Trust</a>
<a class="hover:text-white" href="https://redis.io/legal/privacy-policy/">Privacy</a>
<a class="hover:text-white" href="https://redis.io/legal/redis-website-terms-of-use/">Terms of use</a>
<a class="hover:text-white" href="https://redis.io/legal/">Legal notices</a>
</div>
</div>
<div class="flex flex-col gap-8 md:max-w-[15%] md:flex-[15%]">
<div>
<h3 class="font-medium text-base uppercase text-white">Use Cases</h3>
<div class="flex flex-col gap-4 pt-4">
<a class="hover:text-white" href="https://redis.io/solutions/vector-database/">Vector database</a>
<a class="hover:text-white" href="https://redis.io/solutions/feature-stores/">Feature stores</a><a
class="hover:text-white" href="https://redis.io/redis-for-ai/">Semantic cache</a>
<a class="hover:text-white" href="https://redis.io/solutions/caching/">Caching</a><a
class="hover:text-white" href="https://redis.io/nosql/what-is-nosql/">NoSQL database</a>
<a class="hover:text-white" href="https://redis.io/solutions/leaderboards/">Leaderboards</a>
<a class="hover:text-white" href="https://redis.io/solutions/deduplication/">Data deduplication</a>
<a class="hover:text-white" href="https://redis.io/solutions/messaging/">Messaging</a>
<a class="hover:text-white"
href="https://redis.io/solutions/authentication-token-storage/">Authentication token storage</a>
<a class="hover:text-white" href="https://redis.io/solutions/fast-data-ingest/">Fast-data ingest</a>
<a class="hover:text-white"
href="https://redis.io/solutions/query-caching-with-redis-enterprise/">Query caching</a>
<a class="hover:text-white" href="https://redis.io/solutions">All solutions</a>
</div>
</div>
</div>
<div class="flex flex-col gap-8 md:grid md:max-w-[45%] md:flex-[45%] md:grid-cols-3 md:justify-between">
<div>
<h3 class="font-medium text-base uppercase text-white">Industries</h3>
<div class="flex flex-col gap-4 pt-4">
<a class="hover:text-white" href="https://redis.io/industries/financial-services/">Financial
Services</a>
<a class="hover:text-white" href="https://redis.io/industries/gaming/">Gaming</a><a
class="hover:text-white" href="https://redis.io/industries/healthcare/">Healthcare</a>
<a class="hover:text-white" href="https://redis.io/industries/retail/">Retail</a>
<a class="hover:text-white" href="https://redis.io/industries/">All industries</a>
</div>
</div>
<div class="flex flex-col gap-8 md:grid md:max-w-[60%] md:flex-[60%] md:grid-cols-4 md:justify-between">
<div>
<h3 class="font-medium text-base uppercase text-white">Compare</h3>
<div class="flex flex-col gap-4 pt-4">
<div class="flex flex-col gap-2 pt-3">
<a class="hover:text-white" href="https://redis.io/compare/elasticache/">Redis vs Elasticache</a>
<a class="hover:text-white" href="https://redis.io/compare/memcached/">Redis vs Memcached</a>
<a class="hover:text-white" href="https://redis.io/compare/memorystore/">Redis vs Memory Store</a>
Expand All @@ -82,24 +50,15 @@ <h3 class="font-medium text-base uppercase text-white">Compare</h3>
</div>
<div>
<h3 class="font-medium text-base uppercase text-white">Company</h3>
<div class="flex flex-col gap-4 pt-4">
<div class="flex flex-col gap-2 pt-3">
<a class="hover:text-white" href="https://redis.io/company/">Mission &amp; values</a><a
class="hover:text-white" href="https://redis.io/company/team/">Leadership</a>
<a class="hover:text-white" href="https://redis.io/careers/">Careers</a><a
class="hover:text-white" href="https://redis.io/company/news/">News</a>
</div>
</div>
<div>
<h3 class="font-medium text-base uppercase text-white">Connect</h3>
<div class="flex flex-col gap-4 pt-4">
<a class="hover:text-white" href="https://redis.io/community/">Community</a><a
class="hover:text-white" href="https://redis.io/events/">Events &amp; webinars</a>
<a class="hover:text-white" href="https://redis.io/company/news/">News</a>
<a class="hover:text-white" href="https://redis.io/careers/">Careers</a>
</div>
</div>
<div>
<h3 class="font-medium text-base uppercase text-white">Partners</h3>
<div class="flex flex-col gap-4 pt-4">
<div class="flex flex-col gap-2 pt-3">
<a class="hover:text-white" href="https://redis.io/cloud-partners/aws/">Amazon Web Services</a>
<a class="hover:text-white" href="https://redis.io/cloud-partners/google/">Google Cloud</a>
<a class="hover:text-white" href="https://redis.io/cloud-partners/azure/">Microsoft Azure</a>
Expand All @@ -108,7 +67,7 @@ <h3 class="font-medium text-base uppercase text-white">Partners</h3>
</div>
<div>
<h3 class="font-medium text-base uppercase text-white">Support</h3>
<div class="flex flex-col gap-4 pt-4">
<div class="flex flex-col gap-2 pt-3">
<a class="hover:text-white" href="https://redis.io/services/professional-services/">Professional
services</a><a class="hover:text-white" href="https://redis.io/support/">Support</a>
</div>
Expand Down
82 changes: 31 additions & 51 deletions layouts/partials/header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,39 +8,31 @@
<div class="h-full flex items-center mx-4 grow">
<div class="hidden lg:flex flex-row h-full items-center">
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[18ch] justify-between">
<div class="flex flex-row h-full items-center cursor-pointer w-[22ch] justify-between">
<div class="relative flex rounded-[20px] border border-white border-opacity-50 px-4 pl-9 py-1 transition-all duration-500 group-hover:border-[#ff4438]">
<svg class="absolute top-0 left-[-112px] right-0 bottom-0 m-auto w-4 h-4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg class="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="transform origin-center transition-transform duration-300 group-hover:scale-150" id="star-bottom" d="M11.1718 9.68706C11.2845 9.38235 11.7155 9.38235 11.8282 9.68706L12.3895 11.2037C12.4249 11.2995 12.5005 11.3751 12.5963 11.4105L14.1129 11.9717C14.4176 12.0845 14.4176 12.5155 14.1129 12.6282L12.5963 13.1895C12.5005 13.2249 12.4249 13.3004 12.3895 13.3962L11.8282 14.9129C11.7155 15.2176 11.2845 15.2176 11.1718 14.9129L10.6105 13.3962C10.5751 13.3004 10.4995 13.2249 10.4037 13.1895L8.88708 12.6282C8.58236 12.5155 8.58236 12.0845 8.88708 11.9717L10.4037 11.4105C10.4995 11.3751 10.5751 11.2995 10.6105 11.2037L11.1718 9.68706Z" fill="#FF4438"></path>
<path class="transform origin-center transition-transform duration-300 group-hover:scale-50" id="star-top" d="M5.27175 1.68707C5.38451 1.38235 5.81549 1.38235 5.92825 1.68706L7.05666 4.73654C7.09211 4.83235 7.16764 4.90788 7.26344 4.94333L10.3129 6.07174C10.6176 6.18449 10.6176 6.61548 10.3129 6.72824L7.26344 7.85665C7.16764 7.8921 7.09211 7.96763 7.05666 8.06343L5.92825 11.1129C5.81549 11.4176 5.38451 11.4176 5.27175 11.1129L4.14334 8.06343C4.10789 7.96763 4.03236 7.8921 3.93656 7.85665L0.887077 6.72824C0.582361 6.61548 0.58236 6.18449 0.887077 6.07174L3.93656 4.94333C4.03236 4.90788 4.10789 4.83235 4.14334 4.73654L5.27175 1.68707Z" fill="#FF4438"></path>
</svg>
<a href="https://redis.io/redis-for-ai/" class="inline-block group-hover:font-bold">Redis for AI</a>
<a href="{{ relURL "develop/ai/agent-builder/" }}" class="inline-block group-hover:font-bold whitespace-nowrap">AI agent builder</a>
</div>
</div>
</div>
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[10ch] justify-between">
<span class="inline-block group-hover:font-bold">Products</span>
<span
class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{
partial "icons/caret.html" }}</span>
</div>
{{ partial "header/products-dropdown.html" . }}
</div>
<div class="group h-full px-2 xl:px-[14px]">
<div class="flex flex-row h-full items-center cursor-pointer w-[11ch] justify-between">
<span class="inline-block group-hover:font-bold">Resources</span>
<span
class="inline-block ml-2 mt-1 text-redis-red-500 group-hover:rotate-180 transition-all ease-in-out duration-200">{{
partial "icons/caret.html" }}</span>
</div>
{{ partial "header/resources-dropdown.html" . }}
</div>
<a class="group h-full px-2 xl:px-[14px] flex flex-row items-center" href="{{ relURL "operate/oss_and_stack/install/install-stack/" }}">
<span class="inline-block group-hover:font-bold">Redis install</span>
<span class="inline-block ml-2 mt-1 text-redis-red-500 -rotate-90">{{ partial "icons/caret.html" }}</span>
</a>
<a class="group h-full px-2 xl:px-[14px] flex flex-row items-center" href="{{ relURL "develop/data-types/" }}">
<span class="inline-block group-hover:font-bold">Data types</span>
<span class="inline-block ml-2 mt-1 text-redis-red-500 -rotate-90">{{ partial "icons/caret.html" }}</span>
</a>
</div>
<a class="hidden lg:flex group flex-row items-center px-4" href="{{ relURL "develop/tools/" }}"><span
class="group-hover:font-bold">Tools</span><span class="inline-block ml-2 mt-1 text-redis-red-500 -rotate-90">{{ partial "icons/caret.html" }}</span></a>
<a class="hidden lg:flex group flex-row items-center px-4" href="{{ relURL "operate/oss_and_stack/" }}"><span
class="group-hover:font-bold">Community</span></a>
<a class="hidden lg:flex group flex-row items-center px-4" href="https://redis.io/docs/"><span
class="font-bold">Docs</span></a>
<a class="hidden lg:flex group flex-row items-center px-4" href="https://redis.io/pricing/"><span
class="group-hover:font-bold">Pricing</span></a>
</div>

<div class="h-full flex gap-[18px] xl:gap-7 items-center text-center">
Expand All @@ -50,10 +42,9 @@
</button>
<a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500"
href="https://cloud.redis.io/">Login</a>
<a class="hidden lg:block py-1 transition-colors hover:text-redis-red-500" href="https://redis.io/meeting/">Book a
meeting</a>
<a class="hidden lg:inline-flex items-center justify-center px-6 py-2 mr-4 border-2 border-redis-red-500 text-white font-bold rounded-md hover:bg-redis-red-500 transition-colors"
href="https://redis.io/try-free/">Try Redis</a>

<a class="hidden lg:inline-flex items-center justify-center px-6 py-2 mr-4 border-2 border-redis-red-500 text-white rounded-md hover:bg-redis-red-500 transition-colors"
href="https://redis.io/try-free/">Sign up</a>
Copy link
Copy Markdown

@cursor cursor Bot May 15, 2026

Choose a reason for hiding this comment

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

Desktop "Sign up" button lost font-bold styling

Low Severity

The desktop "Sign up" button had font-bold removed compared to the old "Try Redis" button, but the mobile "Sign up" button still retains font-bold. This creates an inconsistency where the same primary CTA renders with different font weights across breakpoints. The removal looks accidental since both buttons share the same purpose and label.

Additional Locations (1)
Fix in Cursor Fix in Web

Reviewed by Cursor Bugbot for commit 41f411d. Configure here.

<button id="search-button-mobile" type="button" class="lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
<span class="sr-only">Open search</span>
{{ partial "icons/search.html" }}
Expand All @@ -70,47 +61,36 @@
<nav data-menu
class="hidden absolute left-0 top-[70px] h-[calc(100vh-70px)] w-full overflow-y-auto bg-redis-ink-900 pb-12 xl:hidden">
<ul class="space-y-4 bg-redis-ink-900 p-4">
<li data-products-mobile-menu-toggle aria-expanded="false" class="border-b border-b-white border-opacity-30 py-4 last:border-none">
<li class="border-b border-b-white border-opacity-30 py-4 last:border-none">
<div class="flex items-center justify-between">
<a href="https://redis.io/redis-for-ai/" class="text-lg font-medium flex items-center gap-2 text-white">Redis for AI
<a href="{{ relURL "develop/ai/agent-builder/" }}" class="text-lg font-medium flex items-center gap-2 text-white">AI agent builder
<svg class="" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="transform origin-center transition-transform duration-300 group-hover:scale-150" id="star-bottom" d="M11.1718 9.68706C11.2845 9.38235 11.7155 9.38235 11.8282 9.68706L12.3895 11.2037C12.4249 11.2995 12.5005 11.3751 12.5963 11.4105L14.1129 11.9717C14.4176 12.0845 14.4176 12.5155 14.1129 12.6282L12.5963 13.1895C12.5005 13.2249 12.4249 13.3004 12.3895 13.3962L11.8282 14.9129C11.7155 15.2176 11.2845 15.2176 11.1718 14.9129L10.6105 13.3962C10.5751 13.3004 10.4995 13.2249 10.4037 13.1895L8.88708 12.6282C8.58236 12.5155 8.58236 12.0845 8.88708 11.9717L10.4037 11.4105C10.4995 11.3751 10.5751 11.2995 10.6105 11.2037L11.1718 9.68706Z" fill="#FF4438"></path>
<path class="transform origin-center transition-transform duration-300 group-hover:scale-50" id="star-top" d="M5.27175 1.68707C5.38451 1.38235 5.81549 1.38235 5.92825 1.68706L7.05666 4.73654C7.09211 4.83235 7.16764 4.90788 7.26344 4.94333L10.3129 6.07174C10.6176 6.18449 10.6176 6.61548 10.3129 6.72824L7.26344 7.85665C7.16764 7.8921 7.09211 7.96763 7.05666 8.06343L5.92825 11.1129C5.81549 11.4176 5.38451 11.4176 5.27175 11.1129L4.14334 8.06343C4.10789 7.96763 4.03236 7.8921 3.93656 7.85665L0.887077 6.72824C0.582361 6.61548 0.58236 6.18449 0.887077 6.07174L3.93656 4.94333C4.03236 4.90788 4.10789 4.83235 4.14334 4.73654L5.27175 1.68707Z" fill="#FF4438"></path>
</svg></a>
</div>
</li>
<li data-products-mobile-menu-toggle aria-expanded="false" class="border-b border-b-white border-opacity-30 py-4 last:border-none">
<div class="flex items-center justify-between"><span class="text-lg font-medium text-white">Products</span>
<button>
<span data-products-mobile-menu-open-icon>{{ partial "icons/plus-red.html" }}</span>
<span data-products-mobile-menu-close-icon class="hidden">{{ partial "icons/minus-red.html" }}</span>
</button>
</div>
{{ partial "header/products-mobile.html" }}
<li class="border-b border-b-white border-opacity-30">
<div class="flex items-center justify-between"><a href="{{ relURL "operate/oss_and_stack/install/install-stack/" }}" class="block py-4 w-full text-lg font-medium text-white">Redis install</a></div>
</li>
<li data-resources-mobile-menu-toggle aria-expanded="false" class="border-b border-b-white border-opacity-30 py-4 last:border-none">
<div class="flex items-center justify-between"><span class="text-lg font-medium text-white">Resources</span>
<button>
<span data-resources-mobile-menu-open-icon>{{ partial "icons/plus-red.html" }}</span>
<span data-resources-mobile-menu-close-icon class="hidden">{{ partial "icons/minus-red.html" }}</span>
</button>
</div>
{{ partial "header/resources-mobile.html" }}
<li class="border-b border-b-white border-opacity-30">
<div class="flex items-center justify-between"><a href="{{ relURL "develop/data-types/" }}" class="block py-4 w-full text-lg font-medium text-white">Data types</a></div>
</li>
<li class="border-b border-b-white border-opacity-30">
<div class="flex items-center justify-between"><a href="https://redis.io/docs/" class="block py-4 w-full text-lg font-medium text-white">Docs</a></div>
<div class="flex items-center justify-between"><a href="{{ relURL "develop/tools/" }}" class="block py-4 w-full text-lg font-medium text-white">Tools</a></div>
</li>
<li class="border-b border-b-white border-opacity-30">
<div class="flex items-center justify-between"><a href="{{ relURL "operate/oss_and_stack/" }}" class="block py-4 w-full text-lg font-medium text-white">Community</a></div>
</li>
<li>
<div class="flex items-center justify-between"><a href="https://redis.io/pricing/" class="block py-4 w-full text-lg font-medium text-white">Pricing</a></div>
<div class="flex items-center justify-between"><a href="https://redis.io/docs/" class="block py-4 w-full text-lg font-medium text-white">Docs</a></div>
</li>
</ul>
<ul class="pt-6">
<li class="mx-auto flex w-11/12 text-center"><a
class="my-2 w-full rounded-md border border-redis-pen-600 bg-redis-red-700 py-3 text-redis-white-200 font-sans font-bold active:bg-redis-pen-900 active:text-white"
href="https://redis.io/try-free/">Try Redis</a></li>
<li class="mx-auto flex w-11/12 text-center"><a
class="my-2 w-full rounded-md border border-redis-pen-600 py-3 active:bg-redis-pen-800 active:text-white"
href="https://redis.io/meeting/">Book a meeting</a></li>
href="https://redis.io/try-free/">Sign up</a></li>

<li class="mx-auto flex w-11/12 text-center">
<a class="my-2 w-full py-3 active:text-redis-red-500" href="https://cloud.redis.io/">
Login
Expand Down
Loading