Nav items overflowing navbar on medium viewports
See original GitHub issueDescribe the bug
When using the default theme, the navbar items are hidden away in a menu on screen widths lower than 768px.
At 768px and slightly larger sizes, the navbar may have to render on one line:
- The logo and site title
- A search box (when using the
algolia
options) - Several nav items
- And the “extra navigation” button
When the nav items don’t fit, their text may wrap, and their extreme line-height
makes that result particularly bad:

Reproduction
- Visit reproduction on StackBlitz: https://stackblitz.com/edit/vitepress-theme-issue-navbarmenulink?file=index.md
- Resize the preview area to be roughtly 800px wide
Expected behavior
There are two levels of fixes:
-
Mitigate the breakage when nav items do wrap.
- Nav links should not use the header height as their
line-height
(that’s a bad way to do vertical centering of text, for the reason demonstrated in this issue). - Instead use something like
min-height: var(--vp-nav-height-mobile); line-height: normal;
(plus probably a tad ofpadding-block
).
- Nav links should not use the header height as their
-
If the nav items still overflow their container, what should happen? Should they be clipped (
overflow: hidden
on the container), or should the container height grow (i.e. the container should be usingmin-height
and notheight
)? Clipping might be better to conserve the design, but note that it’s a WCAG violation (loss of content). -
Prevent this situation altogether:
- One option is to use the mobile layout earlier, e.g. for widths lower than 1000px instead of widths lower than 769px. (This might not be enough for some accessibility use cases, like text-only zoom.)
- Another one is to implement a type of dynamic overflow menu, where all items that don’t fit in the navbar are moved to the overflow menu. This requires runtime JS, probably using IntersectionObserver.
System Info
System:
OS: macOS 12.5.1
CPU: (8) arm64 Apple M1
Memory: 98.88 MB / 8.00 GB
Shell: 3.5.1 - /opt/homebrew/bin/fish
Binaries:
Node: 16.17.0 - /opt/homebrew/opt/node@16/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.12.1 - ~/.npm-packages/bin/npm
Browsers:
Chrome: 105.0.5195.52
Firefox Nightly: 106.0a1
Safari: 15.6.1
npmPackages:
vitepress: ^1.0.0-alpha.13 => 1.0.0-alpha.13
Additional context
I can probably do a PR for the line-height part at least.
Validations
- Follow our Code of Conduct
- Read the docs.
- Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5 (1 by maintainers)
I disagree. IMO designs should be implemented to be resilient to not-so-extreme cases, in line with the spirit of responsive design (see also: defensive CSS. Oftentimes that’s necessary to meet WCAG AA requirements too.
The current design breaks easily with just ~3 items when those items are not short single word labels, and it currently breaks for two localizations of the Vite docs:
Spanish (the “…” menu is pushed to the right, outside of the viewport):
Chinese (showing the line-height issue again, with label wrappings to two lines, with huge gaps between lines):
Thanks for the report and also the PR, but I really think the right approach to this is to “change the title & menu structures”.
There’s no way we can fit an unlimited number of menus. So, if it gets over-wrapped, users should consider grouping them into a dropdown menu or shortening the labels.
It is all about balance. For example, if you have lots of social links, you will get less space for menu items too.
Sometimes, the content has to adjust to the design. Or, even better, create own custom nav bar that can display the long texts 👍