Masthead: a breadcrumb under the navigation bar, sticky with it, switched on in Settings #831

New issue

Closed

opened 2026-10-10 15:50:06 +00:00 by tiagoagueda · 1 comment

tiagoagueda commented

2026-10-10 15:50:06 +00:00

Owner

A setting that shows a breadcrumb below the navigation bar, using Basecoat's Breadcrumb, sticky like the bar itself.

What exists today

The masthead is <header class="sticky top-0 z-30 …" data-site-header> (templates/base.html:101); app.js measures it into --header-height, which the sticky sidebars, the skip link and scroll-padding-top read (static/js/app.js:2396-2405, assets/css/app.css:2265-2270). Below md the main navigation is a bar fixed to the foot of the window (#299), and nothing on the header may create a containing block (base.html:95-100).
There is no breadcrumb anywhere, and nothing knows a page's place in a hierarchy: core/navigation.py knows the top-level sections only, and templates fill {% block title %} alone (2 of 74 touch title_tail).
Basecoat 1.0.2's breadcrumb.css (.breadcrumb > ol, li, [aria-current=page], separators as li[aria-hidden], [data-rtl-flip]) is in node_modules but not imported. Postulo imports Basecoat's structure one component at a time and paints it in assets/css/basecoat.css; tests/test_stylesheet.py holds the split.
A per-person switch follows the nav_underline precedent (ceaad90ea): a Profile field and migration, the field on AccessibilityForm or AppearanceForm (accounts/forms.py:1010-1076, :1135), a card in the settings page, a data attribute on <body> from core/context_processors.py, and the export/import lists (core/export.py:304, core/importer.py:123).

What would change

Import basecoat-css/components/breadcrumb.css and paint it; a cotton component c-breadcrumb rendering <nav aria-label="Breadcrumb"><ol>…</ol></nav> with the last item aria-current="page".
A source for the trail: a {% block breadcrumb %} per template, or a list built by the view (e.g. Listings › Test Engineer at Aperture Science).
The Profile boolean and its switch in Settings, off by default.
Placed inside <header>, so it is sticky and counted in --header-height without new code.

Decisions

Where the trail comes from. Recommended: a template block with a small c-breadcrumb component, filled page by page, rather than a view-level registry; the sections are few and already named in core/navigation.py.
Which settings page. Recommended: Accessibility → Navigation, beside nav_underline, since both change how navigation is drawn.
Phones. The masthead already hosts the expanding search (#350) and the bottom bar; recommended: the breadcrumb is not drawn below md whatever the setting, so the sticky header does not grow on the smallest screens (reflow, SC 1.4.10).

Checked against main at 8c3d03570. From the maintainer's improvements list of 2026-10-07.

A setting that shows a breadcrumb below the navigation bar, using Basecoat's Breadcrumb, sticky like the bar itself. ## What exists today - The masthead is `<header class="sticky top-0 z-30 …" data-site-header>` (`templates/base.html:101`); `app.js` measures it into `--header-height`, which the sticky sidebars, the skip link and `scroll-padding-top` read (`static/js/app.js:2396-2405`, `assets/css/app.css:2265-2270`). Below `md` the main navigation is a bar fixed to the foot of the window (#299), and nothing on the header may create a containing block (`base.html:95-100`). - **There is no breadcrumb anywhere**, and nothing knows a page's place in a hierarchy: `core/navigation.py` knows the top-level sections only, and templates fill `{% block title %}` alone (2 of 74 touch `title_tail`). - Basecoat 1.0.2's `breadcrumb.css` (`.breadcrumb > ol`, `li`, `[aria-current=page]`, separators as `li[aria-hidden]`, `[data-rtl-flip]`) is in `node_modules` but **not imported**. Postulo imports Basecoat's structure one component at a time and paints it in `assets/css/basecoat.css`; `tests/test_stylesheet.py` holds the split. - A per-person switch follows the `nav_underline` precedent (`ceaad90ea`): a `Profile` field and migration, the field on `AccessibilityForm` or `AppearanceForm` (`accounts/forms.py:1010-1076`, `:1135`), a card in the settings page, a data attribute on `<body>` from `core/context_processors.py`, and the export/import lists (`core/export.py:304`, `core/importer.py:123`). ## What would change 1. Import `basecoat-css/components/breadcrumb.css` and paint it; a cotton component `c-breadcrumb` rendering `<nav aria-label="Breadcrumb"><ol>…</ol></nav>` with the last item `aria-current="page"`. 2. A source for the trail: a `{% block breadcrumb %}` per template, or a list built by the view (e.g. *Listings › Test Engineer at Aperture Science*). 3. The `Profile` boolean and its switch in Settings, off by default. 4. Placed inside `<header>`, so it is sticky and counted in `--header-height` without new code. ## Decisions - **Where the trail comes from.** Recommended: a template block with a small `c-breadcrumb` component, filled page by page, rather than a view-level registry; the sections are few and already named in `core/navigation.py`. - **Which settings page.** Recommended: *Accessibility → Navigation*, beside `nav_underline`, since both change how navigation is drawn. - **Phones.** The masthead already hosts the expanding search (#350) and the bottom bar; recommended: the breadcrumb is not drawn below `md` whatever the setting, so the sticky header does not grow on the smallest screens (reflow, SC 1.4.10). Checked against `main` at `8c3d03570`. From the maintainer's improvements list of 2026-10-07.

tiagoagueda added this to the 0.6.0 milestone

2026-10-10 15:50:06 +00:00

tiagoagueda added the

interface

enhancement

labels

2026-10-10 15:50:06 +00:00

tiagoagueda referenced this issue

2026-10-10 15:50:23 +00:00

Masthead: a setting to show the breadcrumb only on hover, collapsed to a thin line otherwise #832

tiagoagueda self-assigned this

2026-10-11 10:52:48 +00:00