Page header

The top of a page: back and forward, the path as the title, the page's own tools on the right, and one line across the window under it.

Use it once at the top of every page of an app that has pages one level deep: a folder in Files, an artist in Music. The path is the title, and Back returns. For what is shown on the page below it (the count, the order, the views), use a view bar, not more tools in the header.

Anatomy

1. Back and forwardTwo icon buttons at 22 pixels. A button with nowhere to go is disabled: in the faint ink, out of the Tab order, and it does nothing.
2. ParentsThe parents in the path, outermost first, in the secondary ink, each followed by a small ›. Pressing one goes there. In code they are crumbs.
3. This pageStrong, in the main ink. When the path is too long for the room, this is what shortens, at its end.
4. ToolsThe page's own tools, right-aligned: usually a search field. Put them inside the header.
5. LineOne hairline under the header, starting in line with the buttons and running to the window's edge.

The path is set in Tacit Sans Display at headline size, 30 pixels.

States

1. At restBack is available, Forward is not.
2. Forward availableAfter going back, Forward is lit.
3. First pageBoth buttons are disabled, in the faint ink.
4. ReadingWhile a slow page is being read (loading), a 2-pixel stretch in the accent, 220 pixels long, runs along the line every 1.4 seconds (sweep). The rows appear as they are read. There is no spinner on the page. With Kit.reducedMotion the stretch stands still at the line's start.

A parent under the pointer goes from the secondary to the main ink, and with the keyboard it has the focus ring.

Sizes

Keys and pointer

Accessibility

• The header is a tool bar. Back and Forward are buttons named "Back" and "Forward", and a disabled one says so.
• The parents are links, each a stop for Tab and named by its words; the page itself is a heading. The › between them is hidden from a screen reader.
• While loading, a screen reader hears "Loading" in the header's description.
• The path's inks keep an APCA contrast of at least 75 on both palettes; this page's name, in the main ink, reaches 92. The › is in the meta ink and carries no meaning.

Writing

Name the page as it is: the folder's name, the artist's name, the drive's name. Do not add a subtitle or a count under it: a count goes in the view bar. Keep a parent's name as it is where it is the title of its own page, so people see the same word in both.

Do and don't

Code

import Tacit.Kit

PageHeader {
    width: parent.width
    crumbs: ["Home"]                     // the parents, outermost first
    here: "Downloads"
    canGoBack: history.canGoBack
    canGoForward: history.canGoForward
    loading: folder.reading
    onBack: history.back()
    onForward: history.forward()
    onCrumbPicked: i => go(path.slice(0, i + 1))
    SearchField { anchors.verticalCenter: parent.verticalCenter; scope: "Downloads" }
}

Experimental, in Tacit.Kit 0.1.

Text and figures: CC BY 4.0. Tacit.Kit: LGPL-3.0 code, OFL fonts. The Tacit name.