Breadcrumbs
Where this page sits: a trail of links up to the home page, the last one marked as this page.
Demo
On a phone, the middle items are cut short; their whole label is a tooltip.
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/breadcrumbs.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/breadcrumbs.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/breadcrumbs.qwe
view BreadcrumbsDemo() = <div.demo-stack> <Breadcrumbs items={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs/" }, { label: "Components", href: "/components/" }, { label: "Breadcrumbs" }]}/> <Breadcrumbs items={[{ label: "Acme Inc.", href: "/" }, { label: "Projects", href: "/projects" }, { label: "Quarterly marketing campaign for the spring launch", href: "/projects/41" }, { label: "Settings" }]}/> <p.demo-note>On a phone, the middle items are cut short; their whole label is a tooltip.</p> </div>Source
ui/breadcrumbs.qwe
// Breadcrumbs: where this page sits, as a trail of links to the pages above it.//// <Breadcrumbs items={[{ label: "Home", href: "/" }, { label: "Docs", href: "/docs" },// { label: "Components" }]}/>//// items: maps of { label, href? }, from the top down. The last one is this page// (aria-current="page"); a link only if it has an href. The others without an href// show as plain text. On narrow screens the middle ones are cut short, with their// whole label as a tooltip. label: what screen readers call it ("Breadcrumb").import ui/theme.qwe use ui_clslet breadcrumbs_css = css`.ui-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; font: 14px/1.4 var(--ui-font); color: var(--ui-muted); }.ui-breadcrumbs li { display: inline-flex; align-items: center; min-width: 0; }.ui-breadcrumbs li + li::before { content: ""; flex: none; width: 6px; height: 6px; margin: 0 10px 0 7px; border: solid var(--ui-strong); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);}.ui-breadcrumbs a, .ui-breadcrumbs-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; border-radius: 4px; color: var(--ui-muted); text-decoration: none;}.ui-breadcrumbs a:hover { color: var(--ui-fg); text-decoration: underline; text-underline-offset: 3px; }.ui-breadcrumbs a:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-breadcrumbs [aria-current="page"] { color: var(--ui-fg); font-weight: 500; }@media (max-width: 600px) { .ui-breadcrumbs li:not(:first-child):not(:last-child) a, .ui-breadcrumbs li:not(:first-child):not(:last-child) .ui-breadcrumbs-text { max-width: 9ch; } .ui-breadcrumbs li:last-child > * { max-width: 20ch; }}`view Breadcrumbs(items: list = [], label: str = "Breadcrumb", class: str? = null) { style global breadcrumbs_css <nav class={ui_cls(["ui-breadcrumbs", class])} aria-label={label}> <ol> {for [i, it] in enumerate(items) => { let here = i == len(items) - 1 <li> {it.href != null ? <a href={it.href} title={it.label} aria-current={here ? "page" : null}>{it.label}</a> : <span.ui-breadcrumbs-text title={it.label} aria-current={here ? "page" : null}>{it.label}</span>} </li> }} </ol> </nav>}Related
AlphabetIndexA to Z links into a list sorted by name; letters with nothing under them stay in place, disabled.4 views · 6 downloadsCollapsibleNavSide navigation in groups that fold under their titles, the browser remembering which are open.6 views · 7 downloadsDirectoryNavA long list of names grouped under sticky letter headers, with a row of letters at the top that jumps to each group.5 views · 5 downloadsFooterNavColumns of grouped links for a site's footer, each under its title, wrapping on narrow screens.5 views · 7 downloadsJumpLinksA row of links to the sections of the page, scrolling sideways when narrow and sticking to the top if asked.6 views · 6 downloadsLinkListA plain list of links, each with a line saying where it leads, an icon and a short note at the right.5 views · 6 downloads
Thread
Thread 0 posts
On Breadcrumbs: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.