Skip to content

feat: add top and bottom sticky mobile navigation #1780

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
Rich-Harris merged 4 commits into from
Feb 22, 2026
Merged

feat: add top and bottom sticky mobile navigation #1780

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
58d07e4
feat: adjust mobile nav
theetrain Feb 9, 2026
dc27384
chore(mobilesubmenu): make headings denser
theetrain Feb 11, 2026
5a90723
chore(mobilesubmenu): give scrollable hints
theetrain Feb 12, 2026
c9edae4
chore: fix list item alignment with headings
theetrain Feb 12, 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
2 changes: 1 addition & 1 deletion packages/site-kit/src/lib/nav/MobileMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@
width: 50%;
height: 4.8rem;
padding: 0 var(--sk-page-padding-side);
z-index: 2;
z-index: 10;
Copy link
Contributor Author

@theetrain theetrain Feb 10, 2026

Choose a reason for hiding this comment

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

This was necessary to prevent headings from covering the 'back to docs' button.

}

.universal .contents,
Expand Down
132 changes: 87 additions & 45 deletions packages/site-kit/src/lib/nav/MobileSubMenu.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,61 +31,73 @@
</script>

<nav bind:this={nav}>
{#each contents as section}
<section>
<h2>{title} • {section.title}</h2>

{#if section.sections.length !== 0}
<ul>
{#each section.sections as { title, sections: subsections }}
<li>
{#if title}
<h3>
{title}
</h3>
{/if}

<ul>
{#each subsections as { path, title }}
<li>
<a href={path} aria-current={path === $page.url.pathname ? 'page' : undefined}>
{title}
</a>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
{/if}
</section>
{#each contents as section, i}
<h2 style="--index: {i}; --reverse-index: {contents.length - i - 1}">
<a href="#{section.title}">{section.title} <span class="visually-hidden">{title}</span></a>
</h2>

{#if section.sections.length !== 0}
<ul id={section.title} style="--index: {i}">
{#each section.sections as { title, sections: subsections }}
<li>
{#if title}
<h3>
{title}
</h3>
{/if}

<ul>
{#each subsections as { path, title }}
<li>
<a href={path} aria-current={path === $page.url.pathname ? 'page' : undefined}>
{title}
</a>
</li>
{/each}
</ul>
</li>
{/each}
</ul>
{/if}
{/each}
</nav>

<style>
nav {
padding: 0 0 3rem 0;
--header-padding: 1rem;

container-type: size;
font-family: var(--sk-font-family-ui);
overflow-y: auto;
height: 100%;
padding: 0 var(--sk-page-padding-side) 3rem;
}

section {
padding: 1rem var(--sk-page-padding-side);
ul {
--block-height: calc(1lh + var(--header-padding));

& > ul {
margin-bottom: 0 0 2rem 0;
}
/*
* Necessary values to match `scroll-margin-top`
* with `h2` heights.
*/
font-size: 1.6rem;
line-height: 1.5;

ul {
list-style-type: none;
margin: 0;
margin-bottom: 2.5rem;
}
list-style-type: none;
margin: 0;
margin-bottom: 2.5rem;
scroll-margin-top: calc((var(--index, 1) + 1) * var(--block-height));
}

li {
display: block;
}
li {
display: block;
}

h2 + ul > li {
/* h2 anchor padding - margin-left - border width */
padding-left: calc(1.75rem - 1px);
margin-left: 0.25rem;
border-left: 1px solid var(--sk-border);
}

h2,
Expand All @@ -98,9 +110,11 @@

h2 {
position: sticky;
top: 0;
z-index: 1;
padding: 1rem 0;
top: calc(var(--index, 0) * calc(1lh + var(--header-padding)));
bottom: calc(var(--reverse-index, 0) * calc(1lh + var(--header-padding)));
z-index: calc(var(--index, 1) + 1);
padding: calc(var(--header-padding) / 2) 0;
margin: calc(var(--header-padding) / 2) 0;
background-color: var(--sk-bg-2);
}

Expand All @@ -112,4 +126,32 @@
color: var(--sk-fg-accent) !important;
}
}

h2 a {
padding: 0 0 0 2rem !important;

&::before {
content: '#';
position: absolute;
left: 0;
color: var(--sk-fg-3);
}

&:hover::before,
&:focus::before {
color: var(--sk-fg-1);
}
}

/* Hide stacked heading experience on very small screens */
@container (height < 450px) {
ul {
scroll-margin-top: var(--block-height);
}

h2 {
top: 0;
bottom: initial;
}
}
</style>