Menu

Loading...

<flint-menu-item>

A single option inside a flint-menu.

• Tag: <flint-menu-item>
• Class: FlintMenuItem

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintMenuItem } from '@getufy/flint-ui';

Usage

<flint-menu-item></flint-menu-item>

Properties

Property	Attribute	Type	Default	Description
selected	selected	boolean	false	Marks this item as the currently selected option.
disabled	disabled	boolean	false	Disables the item — it becomes non-interactive.
dense	dense	boolean	false	Dense padding mode (for desktop-density menus).
divider	divider	boolean	false	Renders a hairline separator below this item.
value	value	string | undefined	—	The machine-readable value carried in the flint-menu-item-select event detail.

Events

Event	Detail	Description
flint-menu-item-select	{ value: string | null, label: string }	Fired when the item is activated. detail: { value: string | null, label: string }

Slots

Name	Description
(default)	Item label text.
icon	Leading icon.
end-icon	Trailing icon or shortcut hint.

CSS Parts

Name	Description
base	The component's base wrapper element.
label	The label element.

CSS Custom Properties

Property	Default
--flint-menu-item-dense-min-height	44px
--flint-border-color	—
--flint-text-color-muted	—
--flint-font-family	—
--flint-text-color	—
--flint-hover-color	—
--flint-active-color	—
--flint-primary-color	—
--flint-primary-color-light	—
--flint-primary-color-light-hover	—
--flint-surface-1	—
--flint-border-radius-md	—
--flint-shadow-md	—
--flint-shadow-lg	—

---

<flint-menu-divider>

A hairline separator for grouping items in a menu.

• Tag: <flint-menu-divider>
• Class: FlintMenuDivider

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintMenuDivider } from '@getufy/flint-ui';

Usage

<flint-menu-divider></flint-menu-divider>

---

<flint-menu-group>

A labelled group of menu items. Wraps items in a role="group" for screen-reader announcements.

• Tag: <flint-menu-group>
• Class: FlintMenuGroup

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintMenuGroup } from '@getufy/flint-ui';

Usage

<flint-menu-group></flint-menu-group>

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Visible heading rendered above the group items.

Slots

Name	Description
(default)	Group items (flint-menu-item elements).

---

<flint-menu>

A menu displays a list of choices on a temporary surface. Place it as a sibling to its anchor element inside a position:relative container.

• Tag: <flint-menu>
• Class: FlintMenu

Import

import '@getufy/flint-ui'; // auto-registers all
// or
import { FlintMenu } from '@getufy/flint-ui';

Usage

<flint-menu></flint-menu>

Properties

Property	Attribute	Type	Default	Description
open	open	boolean	false	Whether the menu is open/visible.
placement	placement	'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right-start' | 'left-start'	'bottom-start'	Menu placement relative to its anchor container.
closeOnSelect	close-on-select	boolean	true	When true, selecting an item automatically fires flint-menu-close.
scrollable	scrollable	boolean	false	When true, constrains height to --flint-menu-max-height (default 300px) and enables scrolling.
label	label	string | undefined	—	Accessible label for the menu surface (aria-label on role="menu").
hoist	hoist	boolean	false	When true, the menu dropdown uses position: fixed instead of position: absolute

Events

Event	Detail	Description
flint-menu-close	{ open: false }	Fired when the menu requests to be closed (backdrop click, Escape, or item select). detail: { open: false }

Slots

Name	Description
(default)	Menu content (flint-menu-item elements).

CSS Custom Properties

Property	Default
--flint-menu-item-dense-min-height	44px
--flint-menu-z-index	—
--flint-menu-min-width	—
--flint-menu-max-width	360px
--flint-menu-max-height	300px

---