Skip to content

HySidebarItem

A single row inside an hy-sidebar — icon, label, optional trailing content.

Renders as <a> when href is set and not disabled, otherwise <button>. disabled always wins — a disabled item is a <button disabled> regardless of href, because HTML has no native disabled attribute on anchors.

When the parent hy-sidebar is collapsed, the label hides visually but the accessible name survives via aria-label, and a tooltip mounts around the row using the same label text.

Events

  • activate - Fired on click (before navigation). Consumers with client-side routing can detail.originalEvent.preventDefault() to intercept. Detail: { value, href, originalEvent }

Slots

  • leading - Optional icon. Reserved layout column only when content is present, or when the parent sidebar is collapsed (where the glyph is essentially required).
  • default - Label text.
  • trailing - Badge, count, or chevron. Column is hidden when the slot is empty.

Methods

focus()

Programmatically focus the underlying interactive element.

Built with Lit. Documented with VitePress.