Path node

The custom element is <hui-path-node>.

Overview

One node of a hui-path. What it is follows from what the server puts in it - text, a link, a hui-dropdown-menu or a hui-popover - and a menu or popover in slot="children" makes its chevron a button.

Example

A link with a children menu

Source

<hui-path>
  <hui-path-node>
    <a href="#music"><svg class="hui-icon" aria-hidden="true"><use href="/doc/hui/hui-icons.svg#ri-folder-line"></use></svg>Music</a>
    <hui-dropdown-menu slot="children">
      <a role="menuitem" href="#jazz">Jazz</a>
      <a role="menuitem" href="#rock">Rock</a>
    </hui-dropdown-menu>
  </hui-path-node>
  <hui-path-node current>Jazz</hui-path-node>
</hui-path>

The Go template that renders it:

<hui-path-node{{ if .Current }} current{{ end }}>
  <a href="{{ .Href }}">{{ .Name }}</a>
  <hui-dropdown-menu slot="children">
    {{ range .Children }}<a role="menuitem" href="{{ .Href }}">{{ .Name }}</a>{{ end }}
  </hui-dropdown-menu>
</hui-path-node>

API

Attributes6

Attributes
Name	Type	Default	Description
`current`	`boolean`	`false`	This node is where the reader is: announced as `aria-current="page"` and drawn in the foreground colour. Server-owned.
`href`	`string`	-	Where a menu, popover or label node stands for, used when it is listed in the fold or narrow menu. A link node uses its link.
`children-label`	`string`	-	The chevron button’s accessible name. Defaults to "Contents of" and the node’s label.
`data-kind`	`"label" \| "link" \| "menu" \| "popover"`	-	Written by the element from its content, for host CSS and tests.
`data-last`	`boolean`	-	Written by `hui-path` on the last node, which draws no separator unless it has children.
`data-folded`	`boolean`	-	Written by `hui-path` on a node folded behind the fold menu.

Properties3

Properties
Name	Type	Default	Description
`label`	`string`	-	Read-only. The node’s name: its control’s text, or its own text without the children menu.
`control`	`HTMLElement \| null`	-	Read-only. The link or overlay trigger the node is.
`link`	`HTMLAnchorElement \| null`	-	Read-only. The node’s link, when it is a link node.

Methods1

Methods
Name	Type	Description
`openMenu()`	`boolean`	Opens the children menu, or the node’s own menu or popover. Returns whether there was one.

Slots3

Slots
Name	Description
`(default)`	The node: text and icons, an `<a href>`, a `hui-dropdown-menu` or a `hui-popover` with its own `slot="trigger"` button.
`children`	A `hui-dropdown-menu` or `hui-popover` the chevron opens, with no trigger of its own.
`separator`	A custom separator for this node.

::part() hooks4

::part() hooks
Name	Description
`node`	The wrapper around the node’s content.
`separator`	The separator after the node.
`children`	The chevron button, when the node has children.
`anchor`	Where the children menu is anchored, just before the chevron.

States

This element has no states beyond its default.

Server-side mechanics

The node’s content and current are the server’s. The element derives its kind from that content and writes it as data-kind; replacing the content re-derives it. The children menu’s items are the host’s too, loaded up front or on hui-open - with HTMX, hx-trigger="hui-open once" on the menu.

Accessibility

A list item of the trail, set on the element itself so the host’s markup is not rewritten.
An icon in a node is the host’s <svg class="hui-icon" aria-hidden="true">, so the node’s name is its text alone.

Keyboard

Keyboard
Keys	Action
`Down`	On the chevron, opens the children menu.

Gotchas

The node’s own menu or popover takes a slot="trigger" button; the children menu does not, because the chevron opens it.
Styling for the host’s link and trigger is in home-ui.css, scoped to direct children of hui-path-node.