Skip to content

Docs: Add Multi-Product Navigation #2057

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
talbs merged 7 commits into from
Feb 20, 2026
Merged

Docs: Add Multi-Product Navigation #2057

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d0ddeec
fixing order of header + subheader blocks in base.njk
talbs Feb 10, 2026
89678d7
using `<wa-icon>` for icon-only logos
talbs Feb 11, 2026
f749bf4
syncing up `--content-padding-inline` with docs
talbs Feb 11, 2026
b14b8b2
adding products-based nav to Docs header
talbs Feb 10, 2026
d11dcb6
fixup! visually align active product with left UI edge
talbs Feb 19, 2026
614e525
Apply suggestions from code review
talbs Feb 19, 2026
c527c5f
revising drawer products-based nav
talbs Feb 20, 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
18 changes: 9 additions & 9 deletions packages/webawesome/docs/_includes/_banner-wa-launch.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{% raw %}
{%- if req.stripe.discount.active and not currentUser.hasPro -%}
<div slot="banner" class="banner-wa-launch wa-dark">
<div class="banner-content wa-split">
<div class="wa-cluster wa-gap-s">
<wa-icon name="badge-percent" class="banner-icon"></wa-icon>
<div slot="banner" class="wrapper-banner">
<wa-callout appearance="accent" variant="neutral" class="banner banner-wa-launch">
<wa-icon slot="icon" family="duotone" name="badge-percent" class="banner-icon"></wa-icon>
<div class="wa-split">
<p class="wa-body-s">
<strong style="margin-inline-end: var(--wa-space-2xs)">Web Awesome is here!</strong>
Celebrate with <span class="appearance-underlined variant-drawn">20% off</span> on a Web Awesome Pro plan&hellip; <span class="appearance-underlined variant-drawn">for life</span>!
</p>
<wa-button appearance="accent" variant="brand" size="small" href="/purchase" class="brand-font">
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
Get Pro + Save 20%
</wa-button>
</div>
<wa-button appearance="outlined" variant="brand" size="small" href="/purchase" class="brand-font">
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
Get Pro + Save 20%
</wa-button>
</div>
</wa-callout>
</div>
{%- endif -%}
{% endraw %}
310 changes: 151 additions & 159 deletions packages/webawesome/docs/_includes/base.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,178 +3,170 @@
{% if hasBanner == undefined %}{% set hasBanner = true %}{% endif %}
{% if hasSiteDialog == undefined %}{% set hasSiteDialog = true %}{% endif %}
{% if hasGeneratedTitle == undefined %}{% set hasGeneratedTitle = true %}{% endif %}
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak"{% if hasAnchors == false %} data-no-anchor{% endif %}>
<head>
{% include 'head.njk' %}
<meta name="theme-color" content="#f36944">

<script type="module" src="/assets/scripts/code-examples.js"></script>
<script type="module" src="/assets/scripts/scroll.js"></script>
<script type="module" src="/assets/scripts/turbo.js"></script>
<script type="module" src="/assets/scripts/search.js"></script>
<script type="module" src="/assets/scripts/search-list.js"></script>
<script type="module" src="/assets/scripts/outline.js"></script>
<script type="module" src="/assets/scripts/color-scheme.js"></script>
<script type="module" src="/assets/scripts/theme.js"></script>
{% if hasSidebar %}<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}

{% block head %}
<link rel="stylesheet" href="/assets/styles/docs.css" />
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak" {% if
hasAnchors == false %} data-no-anchor{% endif %}>
<head>
{% include 'head.njk' %}
<meta name="theme-color" content="#f36944">

<script type="module" src="/assets/scripts/code-examples.js"></script>
<script type="module" src="/assets/scripts/scroll.js"></script>
<script type="module" src="/assets/scripts/turbo.js"></script>
<script type="module" src="/assets/scripts/search.js"></script>
<script type="module" src="/assets/scripts/search-list.js"></script>
<script type="module" src="/assets/scripts/outline.js"></script>
<script type="module" src="/assets/scripts/color-scheme.js"></script>
<script type="module" src="/assets/scripts/theme.js"></script>
{% if hasSidebar %}
<script type="module" src="/assets/scripts/sidebar.js"></script>{% endif %}

{% block head %}
<link rel="stylesheet" href="/assets/styles/docs.css" />
{% endblock %}

<script type="module">
// Set the initial color scheme before the page renders to prevent flashing
const value = localStorage.getItem('color-scheme') || 'auto';
const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('wa-dark', isDark);
</script>
</head>
<body
class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">

{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true,
'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
{% set waPageAttributes = waPageAttributes or {} %}
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
<wa-page {% for key, value in mergedWaPageAttributes %} {% if value != null and value != false %} {{ key
}}="{{ value }}" {% endif %} {% endfor %}>
{# wa-page-based Skip to Content #}
{% block pageSkipToContent %}{% endblock %}

{# wa-page-based Banner #}
{% block pageBanner %}
{% if hasBanner %}
{#- WA Launch Banner -#}
{% include "_banner-wa-launch.njk" ignore missing %}
{% endif %}
{% endblock %}

<script type="module">
// Set the initial color scheme before the page renders to prevent flashing
const value = localStorage.getItem('color-scheme') || 'auto';
const isDark = value === 'dark' || (value === 'auto' && matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('wa-dark', isDark);
</script>
</head>
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">

{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
{% set waPageAttributes = waPageAttributes or {} %}
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
<wa-page
{% for key, value in mergedWaPageAttributes %}
{% if value != null and value != false %}
{{ key }}="{{ value }}"
{% endif %}
{% endfor %}
>
{# wa-page-based Skip to Content #}
{% block pageSkipToContent %}{% endblock %}

{# wa-page-based Banner #}
{% block pageBanner %}
{% if hasBanner %}
{#- WA Launch Banner -#}
{% include "_banner-wa-launch.njk" ignore missing %}
{% endif %}
{% endblock %}
{# wa-page-based Header #}
{% block pageHeader %}
<header slot="header">
{% include 'nav-products.njk' %}

{# wa-page-based Subheader #}
{% block pageSubheader %}{% endblock %}

{# wa-page-based Header #}
{% block pageHeader %}
<header slot="header" class="wa-split">
{# Nav toggle #}
<wa-button appearance="plain" size="small" data-toggle-nav>
<wa-icon name="bars" label="Toggle navigation" class="icon-default icon-embiggen"></wa-icon>
<wa-icon name="burger" aria-hidden="true" class="icon-hover icon-embiggen"></wa-icon>
</wa-button>

{# Logo - Desktop #}
<a href="/" class="brand-logo wa-desktop-only" aria-label="Web Awesome">{% include "logo.njk" %}</a>

{# Logo - Mobile #}
<a href="/" class="brand-logo wa-mobile-only" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>

<div id="docs-toolbar" class="wa-cluster gap-s">
<div class="wa-desktop-only wa-cluster wa-gap-2xs">
{% include "theme-selector.njk" %}
{% include "color-scheme-selector.njk" %}
{% include "github-icon-buttons.njk" %}
</div>

{#- Login -#}
{% include "login-or-avatar.njk" ignore missing %}
</div>
</header>
{% endblock %}
<div id="docs-header" class="wa-split">
{% include "nav-docs.njk" %}

{# Nav toggle #}
{% include "nav-toggle.njk" %}

{# Logo - Mobile #}
{% include "header-logo-simple.njk" %}

{# wa-page-based Navigation Header #}
{% block pageNavigationHeader %}
{# Sidebar - Mobile Selectors #}
{% if hasSidebar %}
<div class="wa-mobile-only" slot="navigation-header">
<div class="wa-cluster wa-gap-s">
<a class="brand-logo" href="/" aria-label="Web Awesome">{% include "logo-simple.njk" %}</a>
<div class="wa-cluster wa-gap-2xs" style="flex-wrap: nowrap;">
{% include "theme-selector.njk" %}
{% include "color-scheme-selector.njk" %}
{% include "github-icon-buttons.njk" %}
</div>
</div>
<div id="docs-toolbar" class="wa-cluster gap-s">
<div class="header-toolbar wa-cluster wa-gap-2xs">
{% include "theme-selector.njk" %}
{% include "color-scheme-selector.njk" %}
{% include "github-icon-buttons.njk" %}
</div>
{% endif %}

{#- Login -#}
{% include "login-or-avatar.njk" ignore missing %}
</div>
</div>
</header>
{% endblock %}

{# wa-page-based Subheader #}
{% block pageSubheader %}{% endblock %}

{# wa-page-based Navigation Header #}
{% block pageNavigationHeader %}
{# Sidebar - Mobile Selectors #}
{% if hasSidebar %}
<div class="wa-mobile-only" slot="navigation-header">
{% include "nav-products-drawer.njk" %}
</div>
{% endif %}
{% endblock %}

{# wa-page-based Navigation #}
{% block pageNavigation %}
{# Sidebar - Navigation #}
{% if hasSidebar %}
<div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
{% include "sidebar.njk" %}
</div>
{% endif %}
{% endblock %}

{# wa-page-based Navigation Footer #}
{% block pageNavigationFooter %}{% endblock %}

{# wa-page-based Main Header #}
{% block pageMainHeader %}{% endblock %}

{# wa-page-based Main Content (default) #}
<main id="content">
{# Expandable outline #}
{% if hasOutline %}
<nav id="outline-expandable">
<details class="outline-links">
<summary>On this page</summary>
</details>
</nav>
{% endif %}

{# Flashes #}
{% block flashes %}
<div id="flashes">{% server "flashes" %}</div>
{% endblock %}

{# wa-page-based Navigation #}
{% block pageNavigation %}
{# Sidebar - Navigation #}
{% if hasSidebar %}
<div slot="navigation" id="sidebar" class="docs-aside" data-remember-scroll>
{% include "sidebar.njk" %}
</div>
{% endif %}
{% block header %}
{% if hasGeneratedTitle %}
<h1 class="title">{{ title }}</h1>
{% endif %}
{% endblock %}

{# wa-page-based Navigation Footer #}
{% block pageNavigationFooter %}{% endblock %}

{# wa-page-based Main Header #}
{% block pageMainHeader %}{% endblock %}

{# wa-page-based Main Content (default) #}
<main id="content">
{# Expandable outline #}
{% if hasOutline %}
<nav id="outline-expandable">
<details class="outline-links">
<summary>On this page</summary>
</details>
</nav>
{% endif %}

{# Flashes #}
{% block flashes %}
<div id="flashes">{% server "flashes" %}</div>
{% endblock %}

{% block header %}
{% if hasGeneratedTitle %}
<h1 class="title">{{ title }}</h1>
{% endif %}
{% endblock %}

{% block beforeContent %}{% endblock %}

{% block content %}
{{ content | safe }}
{% endblock %}

{% block afterContent %}{% endblock %}
</main>

{# wa-page-based Main Footer #}
{% block pageMainFooter %}{% endblock %}

{# wa-page-based Aside #}
{% block pageAside %}
{# Outline #}
{% if hasOutline %}
<aside slot="aside" id="outline" class="docs-aside">
<nav id="outline-standard" class="outline-links">
<h2><a href="#content">{{ title }}</a></h2>
</nav>
</aside>
{% endif %}
{% block beforeContent %}{% endblock %}

{% block content %}
{{ content | safe }}
{% endblock %}

{# wa-page-based Footer #}
{% block pageFooter %}{% endblock %}
{% block afterContent %}{% endblock %}
</main>

{# wa-page-based Main Footer #}
{% block pageMainFooter %}{% endblock %}

{# wa-page-based Aside #}
{% block pageAside %}
{# Outline #}
{% if hasOutline %}
<aside slot="aside" id="outline" class="docs-aside">
<nav id="outline-standard" class="outline-links">
<h2><a href="#content">{{ title }}</a></h2>
</nav>
</aside>
{% endif %}
{% endblock %}

{% include 'search.njk' %}
{# wa-page-based Footer #}
{% block pageFooter %}{% endblock %}

{#- Site-Wide Dialog -#}
{% if hasSiteDialog %}
{% include "_dialog-wa-launch.njk" ignore missing %}
{% endif %}
{% include 'search.njk' %}

{#- Site-Wide Dialog -#}
{% if hasSiteDialog %}
{% include "_dialog-wa-launch.njk" ignore missing %}
{% endif %}

{#- Cookie Consent Dialog -#}
{% include "cookie-consent.njk" ignore missing %}
</wa-page>
{#- Cookie Consent Dialog -#}
{% include "cookie-consent.njk" ignore missing %}
</wa-page>

</body>
</body>
</html>
3 changes: 3 additions & 0 deletions packages/webawesome/docs/_includes/header-logo-simple.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<a href="/" class="header-logo-simple" aria-label="Web Awesome" data-track-event="navigation:header_link_click" data-track-destination="home" data-track-context="mobile_header">
<wa-icon name="web-awesome" family="brands" class="logo-web-awesome"></wa-icon>
</a>
4 changes: 4 additions & 0 deletions packages/webawesome/docs/_includes/logo-eleventy.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<svg class="logo-svg awesome-logo logo-eleventy" width="72" height="16" viewBox="0 0 72 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="logo-icon" fill="var(--logo-icon-fill, #00A776)" d="M6.30273 0C9.7837 0 12.6063 2.8218 12.6064 6.30273C12.6062 9.15809 10.3801 12.2213 7.92676 13.2305L8.6582 14.875C8.70355 14.9772 8.72754 15.0884 8.72754 15.2002C8.72722 15.6416 8.36915 15.9998 7.92773 16H4.67871C4.23712 16 3.87922 15.6417 3.87891 15.2002C3.87891 15.0884 3.90193 14.9772 3.94727 14.875L4.67773 13.2305C2.22488 12.2207 0.000235314 9.15757 0 6.30273C0.000159813 2.8219 2.8219 0.000163693 6.30273 0ZM5.42773 2.02734C3.52937 2.41446 2.07945 4.03288 1.94922 6.01367C1.9234 6.41404 2.22652 6.76072 2.62695 6.78711C3.02744 6.81331 3.37372 6.5088 3.40039 6.1084C3.48718 4.7909 4.45353 3.71115 5.71777 3.45312C6.11103 3.37285 6.36498 2.98801 6.28516 2.59473C6.20482 2.20144 5.82108 1.94736 5.42773 2.02734Z"/>
<path class="logo-text" fill-rule="evenodd" clip-rule="evenodd" fill="var(--logo-text-fill, #183153)" d="M71.8825 6.33534C71.8825 6.50201 71.8389 6.65113 71.7341 6.8178L70.2233 9.32656V10.8616C70.2233 11.3002 69.9001 11.6248 69.4722 11.6248C69.0443 11.6248 68.7212 11.3002 68.7212 10.8616V9.32656L67.2104 6.8178C67.1056 6.65113 67.062 6.50201 67.062 6.33534C67.062 5.93183 67.3763 5.62482 67.7868 5.62482C68.1012 5.62482 68.3282 5.76517 68.4854 6.06341L69.4722 7.85288L70.4591 6.06341C70.6162 5.77394 70.8433 5.62482 71.1577 5.62482C71.5681 5.62482 71.8825 5.93183 71.8825 6.33534Z M62.7576 11.6248C62.3297 11.6248 62.0066 11.3003 62.0066 10.8617V7.08975H60.88C60.487 7.08975 60.1901 6.80027 60.1901 6.40554C60.1901 6.01958 60.487 5.7301 60.88 5.7301H64.6352C65.0369 5.7301 65.3251 6.01958 65.3251 6.40554C65.3251 6.80027 65.0282 7.08975 64.6352 7.08975H63.5086V10.8617C63.5086 11.3003 63.1855 11.6248 62.7576 11.6248Z M57.4755 5.62482C57.9034 5.62482 58.2266 5.94938 58.2266 6.38797V10.8616C58.2266 11.2915 57.9122 11.6248 57.493 11.6248C57.0825 11.6248 56.9166 11.388 56.7158 11.1423L54.6199 8.53709V10.8616C54.6199 11.3002 54.2967 11.6248 53.8688 11.6248C53.4409 11.6248 53.1178 11.3002 53.1178 10.8616V6.38797C53.1178 5.95815 53.4322 5.62482 53.8514 5.62482C54.2618 5.62482 54.4277 5.86166 54.6286 6.10727L56.7245 8.70376V6.38797C56.7245 5.94938 57.0476 5.62482 57.4755 5.62482Z M47.4486 11.5196C47.012 11.5196 46.6889 11.195 46.6889 10.7564V6.49326C46.6889 6.05466 47.012 5.7301 47.4486 5.7301H50.086C50.4877 5.7301 50.7759 6.01958 50.7759 6.40554C50.7759 6.80027 50.479 7.08975 50.086 7.08975H48.1909V7.88799H49.3961C49.7629 7.88799 50.0336 8.15992 50.0336 8.51957C50.0336 8.87922 49.7629 9.15114 49.3961 9.15114H48.1909V10.1599H50.1908C50.5925 10.1599 50.8807 10.4494 50.8807 10.8354C50.8807 11.2301 50.5838 11.5196 50.1908 11.5196H47.4486Z M43.7008 5.62482C44.1288 5.62482 44.4431 5.93183 44.4431 6.34411C44.4431 6.47569 44.4169 6.61604 44.3645 6.71253L42.5568 11.1248C42.4171 11.4581 42.1813 11.6248 41.8407 11.6248C41.5002 11.6248 41.2644 11.4581 41.1246 11.1248L39.3169 6.71253C39.2645 6.61604 39.2383 6.47569 39.2383 6.34411C39.2383 5.93183 39.5527 5.62482 39.9806 5.62482C40.3037 5.62482 40.5483 5.80903 40.688 6.16868L41.8407 9.05463L42.9935 6.16868C43.1332 5.80903 43.3777 5.62482 43.7008 5.62482Z M33.8574 11.5196C33.4207 11.5196 33.0976 11.195 33.0976 10.7564V6.49326C33.0976 6.05466 33.4207 5.7301 33.8574 5.7301H36.4947C36.8964 5.7301 37.1846 6.01958 37.1846 6.40554C37.1846 6.80027 36.8877 7.08975 36.4947 7.08975H34.5997V7.88799H35.8048C36.1716 7.88799 36.4423 8.15992 36.4423 8.51957C36.4423 8.87922 36.1716 9.15114 35.8048 9.15114H34.5997V10.1599H36.5995C37.0012 10.1599 37.2894 10.4494 37.2894 10.8354C37.2894 11.2301 36.9925 11.5196 36.5995 11.5196H33.8574Z M27.7951 11.5195C27.3585 11.5195 27.0354 11.195 27.0354 10.7564V6.38797C27.0354 5.99324 27.3498 5.62482 27.7864 5.62482C28.223 5.62482 28.5374 5.94938 28.5374 6.38797V10.1599H30.3277C30.7207 10.1599 31.0088 10.4494 31.0088 10.8441C31.0088 11.2388 30.7207 11.5195 30.3277 11.5195H27.7951Z M21.3662 11.5196C20.9295 11.5196 20.6064 11.195 20.6064 10.7564V6.49326C20.6064 6.05466 20.9295 5.7301 21.3662 5.7301H24.0035C24.4052 5.7301 24.6934 6.01958 24.6934 6.40554C24.6934 6.80027 24.3965 7.08975 24.0035 7.08975H22.1085V7.88799H23.3136C23.6804 7.88799 23.9511 8.15992 23.9511 8.51957C23.9511 8.87922 23.6804 9.15114 23.3136 9.15114H22.1085V10.1599H24.1083C24.51 10.1599 24.7982 10.4494 24.7982 10.8354C24.7982 11.2301 24.5013 11.5196 24.1083 11.5196H21.3662Z"/>
</svg>
Loading