<st-product-nav>

JSON type: ProductNav

A product sub-navigation bar for a product page, shown under the site header: a lockup (the product icon, a prefix and a name, with a tagline under it), in-page section links, an optional site-menu button and an optional external button.

The lockup is one link (icon, wordmark, rule and tagline) to brand-href.

The link whose section is in view gets aria-current="true", found with an IntersectionObserver on the sections the #anchor links point at. On phones the links move to their own row and scroll sideways inside the bar. sticky pins the bar to the top of the viewport; set --st-product-nav-top to the height of a fixed site header above it.

embedded drops the bar's own background, rule, shadow and sticky positioning, so it fills the row of a host, e.g. the slot="context" of st-header (its context mode). Desktop: lockup, links centred, site-menu button and action pill at the right, vertically centred. Phones: lockup (wordmark 18px, icon 32px, then 28px under 480px; tagline 9px under 480px and still shown), then a sideways-scrolling links row, then a compact action pill.

site-menu-label adds a 44px hamburger button before the action pill. Clicking it dispatches product-nav-site-menu, which the host st-header answers by opening its site menu. While that menu is open the host sets site-menu-open, which is reflected to the button's aria-expanded.

scroll-spy marks the link for the section currently in view with aria-current="location" and an active style (accent colour and a 2px underline). The section is the one whose top is nearest the top of the viewport at or above a 64px line; none is marked while the page is above the first section.

Usage

import '@sankhyatronics/sankhya-cms/product-nav'; // registers <st-product-nav>

Properties

Property	Attribute	Type	Default	Description
brandPrefix	brand-prefix	string	''	Brand prefix, e.g. T-. Shown in the brand navy.
brandName	brand-name	string	''	Product name, e.g. pilot. Shown in the brand azure with an underline.
brandTagline	brand-tagline	string	''	Small line under the name, e.g. by Sankhyatronics. Plain text inside the brand link.
brandHref	brand-href	string	'#top'	Target of the brand link (the icon, wordmark, rule and tagline).
icon	icon	string	''	Product icon image URL, shown inside the brand link before the wordmark (40px; 32px and 28px on phones when embedded). Omitted when empty.
iconDark	icon-dark	string	''	Dark-theme variant of icon, shown on the site's dark theme (:root.dark) in place of it. Needs icon; without it icon shows on every theme.
links	—	ProductNavLink[]	[]	In-page section links.
actionLabel	action-label	string	''	Label of the external button at the end of the bar. Shown only together with href.
actionShortLabel	action-short-label	string	''	Shorter button label for phones in embedded mode (e.g. Open ↗), so the links row keeps its room. Optional; the full action-label is used otherwise.
href	href	string	''	Target of the external button. It opens in the same tab.
siteMenuLabel	site-menu-label	string	''	Accessible name of the site-menu button, e.g. Sankhyatronics menu. Empty (default): no button. Clicking it dispatches product-nav-site-menu.
siteMenuOpen	site-menu-open	boolean	false	True while the host header's site menu is open. Set by the header, never from outside: it drives the button's aria-expanded.
sticky	sticky	boolean	false	Pins the bar to the top of the viewport (position: sticky). Ignored when embedded.
label	label	string	''	Accessible name of the <nav> landmark, e.g. T-pilot. Falls back to the brand prefix and name.
embedded	embedded	boolean	false	Fills the row of a host header (see the class docs): no bar background, rule, shadow or sticky positioning.
scrollSpy	scroll-spy	boolean	false	Marks the link for the section in view with aria-current="location" and an active style.

Events

Event	Detail	Description
product-nav-site-menu	CustomEvent	The site-menu button was clicked. Detail: { trigger }, the button itself, so the host can return focus to it. Bubbles, composed.

See the live examples in Storybook.