<st-dropdown>

JSON type: Dropdown

A labeled trigger + slotted dropdown panel — nav menus (typically holding an st-menu-grid), action menus, anything "click a trigger, show content under it". Markup (.menu > .menu-title + .menu-dropdown), sizes, 0.3s slide/fade, and behavior —

• only one dropdown is open at a time (a shared provider is built in, so no provider element is needed);
• a mousedown outside, Escape, or a click inside the panel closes it;
• an href trigger toggles the panel when it has content, and is a plain link when it doesn't;
• inline opens the panel in the flow, the source's .touch-device layout.

Colors and the panel's surface come from the suite theme. The panel is never 100vw wide at <=768px (it would overflow the screen from wherever the trigger sits; use inline in headers instead), and slotted children are not clipped with overflow: hidden (that would cut off their focus rings). Other attributes: align, active, disabled, inline, the dropdown-toggle event, trigger-style (item for a desktop-bar trigger that matches st-menu-item), and mega plus open-on-hover for a mega menu (see st-mega-menu).

current is set when the trigger's own href or a nav item inside the panel is the current page (see st-header's current-path); the trigger then shows as active, like active.

Usage

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

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Trigger label text (source: title, renamed because title is the native tooltip attribute). Leave empty to show only slot="icon".
href	href	string	''	Renders the trigger as an <a href>. With panel content the click toggles the panel (as in the source); with none it navigates.
iconPosition	icon-position	'left' | 'right'	'left'
iconSize	icon-size	string	'1.2rem'	Inline width/height of the slot="icon" wrapper (source: iconSize, default 1.2rem).
iconColor	icon-color	string	'currentColor'	Inline color of the slot="icon" wrapper (source: iconColor).
align	align	'left' | 'right'	'left'	Which edge of the trigger the panel lines up with.
target	target	string	'_self'	target of an href trigger (source default _self).
triggerClassName	trigger-class-name	string	''	Extra class(es) on the trigger (source: className; a class on st-dropdown styles the host).
itemGroupClassName	item-group-class-name	string	''	Extra class(es) on the panel (source: itemGroupClassName).
itemClassName	item-class-name	string	''	Unused, as in the source (itemClassName is never read there); kept for prop parity.
disabled	disabled	boolean	false
active	active	boolean	false	Highlights the trigger as the current section (e.g. the current page is one of its items).
currentPath	—	string	''	Page path the header is showing; set by st-header.
current	current	boolean	false	Computed from href and the nav items in the panel against currentPath; reflected for styling.
inline	inline	boolean	false	Opens the panel in the flow under the trigger instead of floating over the page (see the styles). st-header sets this on its own menu's dropdowns while its hamburger panel shows.
open	open	boolean	false	Whether the panel is showing. Follows user toggles; may also be set from outside.
mega	mega	boolean	false	Mega-menu panel (okta.com style), typically holding an st-mega-menu: the panel spans the full width of the nearest positioned ancestor — st-header — right under it, instead of hanging off the trigger. In st-header's hamburger layout (inline) it slides in over the screen with a Back button rather than opening as an accordion. A click inside the panel only closes it when it lands on a link.
bar	bar	boolean	false	Styles a non-mega trigger like a mega one — a pill that turns solid accent while open — so a plain dropdown (e.g. "+ New") lines up with mega triggers in the same header bar.
triggerStyle	trigger-style	'default' | 'item'	'default'	default keeps the trigger as it has always looked. item lays it out like an st-menu-item row, so it matches a Home-style link beside it in st-header's desktop bar: the same padding, type and 6px corners, the hover fill, the current-page look with the accent left bar, and a chevron caret in place of the ▼ glyph. Open shows the hover fill, not the solid accent pill. The item look applies only while not inline (the hamburger layout keeps its own look). Set it from JSON as triggerStyle.
openOnHover	open-on-hover	boolean	false	Opens the panel while a mouse hovers the trigger or panel (touch and keyboard still click). Off while inline.
backLabel	back-label	string	'Back'	Text of the Back button in the mega + inline drill-down panel.

Events

Event	Detail	Description
dropdown-toggle	CustomEvent

See the live examples in Storybook.