<st-menu-item>

JSON type: MenuItem

A single flat nav row — icon (slot="icon") + title + badge on one line, an optional description below — as opposed to st-menu-grid-item's card for a multi-column grid. Effects are CSS: nudges right and scales to 1.01 on hover / 0.99 while pressed, the icon tilts on hover, the badge pops in, the description fades in. Colors come from the suite theme rather than per-item utility classes.

Renders a real <a href> but fires a cancelable menu-item-select event (detail: { href }) before navigating — a host doing client-side routing calls event.preventDefault() on it.

It is the current page (aria-current="page", shown as active) when active is set, or when the href matches currentPath, which an enclosing st-header sets from its current-path.

Usage

import '@sankhyatronics/sankhya-cms/menu-item'; // registers <st-menu-item>

Properties

Property	Attribute	Type	Default	Description
title	title	string	''
href	href	string	''
description	description	string	''
badge	badge	string	''	Small trailing label, e.g. a count or "New"/"Beta" — omit for none.
active	active	boolean	false	Highlights this row as the current page (source: isActive).
currentPath	—	string	''	Page path the header is showing; set by st-header (from its current-path), so this row can compare its href with it.
compact	compact	boolean	false
showDescription	show-description	boolean	true	Suppresses the description even when description is set (source: showDescription, default true).
target	target	string	'_self'	target for the <a> (source default _self).
variant	variant	'default' | 'link' | 'bar'	'default'	default (a row with a hover box), link (a plain text link, as in st-mega-menu-column; marked with an arrow when it opens a new tab) or bar (a top-level item in a header bar, shaped like a mega st-dropdown's trigger pill so it lines up with the dropdowns beside it).
iconSize	icon-size	string	''	Size of the slotted icon, any CSS length (e.g. 36px); empty keeps 16px (14px when compact).

Slots

Slot	Description
icon	The row's icon, sized to icon-size (16px, or 14px when compact).

See the live examples in Storybook.