Option to put footer in content
K
Kyle Kovacs
As of now, the footer is separated from the document layout. When you scroll to the bottom of the page, the top of the table of contents becomes hidden. The table of contents on the left side should always remain fixed. Right now, when you scroll down to the bottom of the page, it looks as if the entire layout of the page shifts up slightly and it makes the layout appear broken.
Instead of
<div>
<aside />
<main>
...content
</main>
</div>
<footer />
It should be
<div>
<aside />
<main>
...content
<footer />
</main>
</div>
That way scrolling to the bottom of the page won't jolt the layout around a bunch.
Joshua Chen
Merged in a post:
Option to put footer in content
K
Kyle Kovacs
As of now, the footer is separated from the document layout. When you scroll to the bottom of the page, the top of the table of contents becomes hidden. The table of contents on the left side should always remain fixed. Right now, when you scroll down to the bottom of the page, it looks as if the entire layout of the page shifts up slightly and it makes the layout appear broken.
Instead of
<div>
<aside />
<main>
...content
</main>
</div>
<footer />
It should be
<div>
<aside />
<main>
...content
<footer />
</main>
</div>
<footer />
That way scrolling to the bottom of the page won't jolt the layout around a bunch.
Joshua Chen
Do you have examples of sites using your design? Here are a few that don't:
- https://nextjs.org/docs
- https://developer.mozilla.org/en-US/docs/Web
K
Kyle Kovacs
Joshua Chen Sure, the GitHub home page is like this, though the footer content is small. But they do use a
<footer />
element.- https://github.com/
Microsoft help pages use it, though they kind of anchor the sidebar and resize it. But it still keeps the top of the sidebar anchored, which is nice.
- https://learn.microsoft.com/en-us/windows/wsl/install
And here's another random example that also uses a
<footer />
that doesn't mess with the sidebar.- https://shesapiens.com/
Joshua Chen
Kyle Kovacs Yes; many such layouts I've seen have small footers, so they fit at the bottom of content without being a full-width box. Other such examples include https://remix.run/docs/en/main/file-conventions/routes and https://vite.dev/guide/. However I have yet to see a site with a footer the size of Docusaurus's doing this. I do wonder if we can do something very similar to Microsoft's, by default; I like that design too. The shesapiens website is a bit different because its sidebar is more like a left-floating navbar...
K
Kyle Kovacs
Joshua Chen I think the way Docusaurus behaves currently is a totally reasonable default, but I also think that this may be an easy config option to set up. Like maybe
themeConfig.footer.footerPosition: 'separate' | 'inline' | 'hybrid'
separate
= how Docusaurus is nowinline
= similar to the GitHub onehybrid
= Microsoft oneSomething like that. At the end of the day, I think it's a per-user preference thing.
K
Kyle Kovacs
That being said, I don't have much a11y experience and the layout I suggested may or may not worsen the accessibility if users are expecting the
<footer />
to appear at the very end of the DOM tree.