Navigation bar on phones: every item in the bar, no More, scrolling sideways when they do not fit #912

New issue

Closed

opened 2026-10-15 17:19:05 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-10-15 17:19:05 +00:00

Owner

On a phone held upright, the main navigation bar at the foot of the window drops More (the three dots and its label). Every item sits in the bar itself, spread evenly across it, and the bar scrolls sideways when the items do not fit.

What exists today

templates/partials/nav_links.html draws the main navigation once. Below md (48rem) the same <nav class="nav-main"> is a bar fixed to the foot of the window. It holds the first four items and More (<c-dropdown-menu kind="navigation" … data-nav-more>, trigger {% icon "ellipsis" %} + "More"). More opens a popover upwards that lists the rest.
assets/css/app.css, the block under "The main navigation below md" (about line 2331 on main): five equal slots (flex: 1 1 0), an icon over its label, flex-wrap, so More goes to a second row where the labels do not fit (Estonian at 320px). The comment there gives #299's rule: "the bar grows a line and nothing is cut, clipped or scrolled".
The counts that decide what More holds are in the same file (.nav-main:not(:has(> a:nth-of-type(5))) > [data-nav-more] and the like). So are the rules that shade More when the current page is one of its items (> [data-nav-more]:has(> [data-popover] > a[aria-current="page"]…)). app.js measures the bar into --bottom-bar-height (around mainNav / [data-nav-more], about line 2464).

What would change

Below md, every navigation item is in the bar, in the person's order. More and its popover are not drawn there. From md up the masthead row keeps More as it is now.
The items share the width evenly when they fit. When they do not fit, the bar keeps one row and scrolls sideways (overflow-x: auto, no flex-wrap), with each slot at least its current minimum (44px, labels wrapped between words only).
This reverses #299's "never scrolled" choice for the bar. Update the comment in app.css and nav_links.html to match.
On load, the current item (aria-current="page") is scrolled into view inside the bar, so it is never off-screen.
--bottom-bar-height still measures the bar. With one row it should be stable.

Accessibility

The bar stays a <nav aria-label="Main"> of links, so no new names are needed. Every item is a link, so keyboard users reach the hidden ones by Tab, and the bar has to scroll the focused link into view (SC 2.4.11, focus not obscured).
Show that there is more to scroll, not with colour alone: for example, a fade or partial item at the edge.
The reflow walk in the browser suite (320px, every language) needs updating: it currently expects no horizontal scroll inside the bar.

Notes

No new strings. "More" stays for the masthead row.

Checked against main at 56fc9d531.

On a phone held upright, the main navigation bar at the foot of the window drops *More* (the three dots and its label). Every item sits in the bar itself, spread evenly across it, and the bar scrolls sideways when the items do not fit. ## What exists today - `templates/partials/nav_links.html` draws the main navigation once. Below `md` (48rem) the same `<nav class="nav-main">` is a bar fixed to the foot of the window. It holds the first four items and *More* (`<c-dropdown-menu kind="navigation" … data-nav-more>`, trigger `{% icon "ellipsis" %}` + "More"). *More* opens a popover upwards that lists the rest. - `assets/css/app.css`, the block under "The main navigation below `md`" (about line 2331 on `main`): five equal slots (`flex: 1 1 0`), an icon over its label, `flex-wrap`, so *More* goes to a second row where the labels do not fit (Estonian at 320px). The comment there gives #299's rule: "the bar grows a line and nothing is cut, clipped or scrolled". - The counts that decide what *More* holds are in the same file (`.nav-main:not(:has(> a:nth-of-type(5))) > [data-nav-more]` and the like). So are the rules that shade *More* when the current page is one of its items (`> [data-nav-more]:has(> [data-popover] > a[aria-current="page"]…)`). `app.js` measures the bar into `--bottom-bar-height` (around `mainNav` / `[data-nav-more]`, about line 2464). ## What would change - Below `md`, every navigation item is in the bar, in the person's order. *More* and its popover are not drawn there. From `md` up the masthead row keeps *More* as it is now. - The items share the width evenly when they fit. When they do not fit, the bar keeps one row and scrolls sideways (`overflow-x: auto`, no `flex-wrap`), with each slot at least its current minimum (44px, labels wrapped between words only). - This reverses #299's "never scrolled" choice for the bar. Update the comment in `app.css` and `nav_links.html` to match. - On load, the current item (`aria-current="page"`) is scrolled into view inside the bar, so it is never off-screen. - `--bottom-bar-height` still measures the bar. With one row it should be stable. ## Accessibility - The bar stays a `<nav aria-label="Main">` of links, so no new names are needed. Every item is a link, so keyboard users reach the hidden ones by Tab, and the bar has to scroll the focused link into view (SC 2.4.11, focus not obscured). - Show that there is more to scroll, not with colour alone: for example, a fade or partial item at the edge. - The reflow walk in the browser suite (320px, every language) needs updating: it currently expects no horizontal scroll inside the bar. ## Notes - No new strings. "More" stays for the masthead row. Checked against `main` at `56fc9d531`.

tiagoagueda added the

accessibility

enhancement

interface

labels

2026-10-15 17:19:11 +00:00

tiagoagueda added this to the 0.5.0 milestone

2026-10-25 17:04:12 +00:00

tiagoagueda referenced this issue from a commit

2026-10-27 15:42:33 +00:00

Put every item in the phone's navigation bar and let it scroll (#912)

tiagoagueda referenced this issue from a pull request that will close it,