Class TJSMenu

TJSMenu provides a menu component that can be slotted into toggle components like TJSToggleIconButton and TJSToggleLabel.

TJSMenu supports a flexible data driven way to construct the menu items. Depending on the item data that is passed into the menu you can define 4 types of items: 'icon / label', 'image / label', 'class / Svelte component', and 'separator / hr'. TJSMenu also accepts a main slot allowing the entire menu contents to be replaced with a custom component as well as named slots before and after which place named components before or after the main menu data driven items.

---

Exported props include:

• menu (TJSMenuData): An object defining all properties of a menu including potentially data driven minimal Svelte configuration objects (slotAfter, slotBefore, and slotDefault) providing default component implementations.

Or in lieu of passing the folder object you can assign these props directly:

• items: An iterable list of TJSMenuItemData; defines data driven menu items.

• offset: Optional X / Y offsets for the menu display.

• styles: Styles to be applied inline via applyStyles action.

• efx: Currently unused; for any future action effects.

• keyCode: The key code to activate menu items.

• transitionOptions: Custom transition options for duration and easing function.

---

Events

There is a single that is fired and bubbled up through parent elements:

• close:popup - A CustomEvent fired when the menu closes allowing any parent components to update state. The detail data may have two optional fields of data including keyboardFocus / boolean if the close action originated from keyboard navigation and the other is target / HTMLElement that is the original event target for the close action.

---

Styling

To style this component use .tjs-menu as the base selector.

There are several local CSS variables that you can use to change the appearance dynamically. Either use CSS props or pass in a styles object w/ key / value props to set to the details. The default fallback variables target both TJSMenu and TJSContextMenu. The few popup defaults target first level overlaid components inside an application.

CSS Variables

The following CSS variables are supported, but not defined by default:

--tjs-menu-background - fallback: --tjs-default-menu-background; fallback: --tjs-default-popup-background; default: #23221d
--tjs-menu-border - fallback: --tjs-default-popup-border; default: 1px solid #000
--tjs-menu-border-radius - fallback: --tjs-default-popup-border-radius; default: 5px
--tjs-menu-box-shadow - fallback: --tjs-default-popup-box-shadow; default: 0 0 2px #000
--tjs-menu-primary-color - fallback: --tjs-default-menu-primary-color; fallback: --tjs-default-popup-primary-color; default: #b5b3a4
--tjs-menu-max-width - fallback: --tjs-default-menu-max-width; default: 360px
--tjs-menu-min-width - fallback: --tjs-default-menu-min-width; default: 20px
--tjs-menu-z-index - fallback: --tjs-default-popup-z-index; default: 100

The following CSS variables define attributes for the data driven menu items.

All menu items:
--tjs-menu-item-line-height - fallback: --tjs-default-menu-item-line-height; default: 2em
--tjs-menu-item-padding - fallback: --tjs-default-menu-item-padding; default: 0 0.5em 0 0

Icon / Image menu items (considered a button item):
--tjs-menu-item-button-gap - fallback: --tjs-default-menu-item-button-gap; default: 0.25em
--tjs-menu-item-highlight-color - fallback: --tjs-default-menu-highlight-color; fallback: --tjs-default-popup-highlight-color; default: #f0f0e0
--tjs-menu-item-text-shadow-focus-hover - fallback: --tjs-default-text-shadow-focus-hover; default: 0 0 8px red

Specific targeting for the label of button items (allows control of wrapping / set `white-space` to `nowrap`):
--tjs-menu-item-label-overflow - fallback: --tjs-default-menu-item-label-overflow; default: hidden
--tjs-menu-item-label-text-overflow - fallback: --tjs-default-menu-item-label-text-overflow; default: ellipsis
--tjs-menu-item-label-white-space - fallback: --tjs-default-menu-item-label-white-space; default: undefined

Icon menu item:
--tjs-menu-item-icon-width - fallback: --tjs-default-menu-item-icon-width; default: 1.25em

Image menu item:
--tjs-menu-item-image-width - fallback: --tjs-default-menu-item-image-width; default: 1.25em
--tjs-menu-item-image-height - fallback: --tjs-default-menu-item-image-height; default: 1.25em

Separator / HR:
--tjs-menu-hr-margin - fallback: --tjs-default-hr-margin; default: 0 0.25em
--tjs-menu-hr-border-top - fallback: --tjs-default-hr-border-top; default: 1px solid #555
--tjs-menu-hr-border-bottom - fallback: --tjs-default-hr-border-bottom; default: 1px solid #444

The following CSS variables define the keyboard / a11y focus indicator for menu items:
--tjs-menu-focus-indicator-align-self - fallback: --tjs-default-focus-indicator-align-self; default: stretch
--tjs-menu-focus-indicator-background - fallback: --tjs-default-focus-indicator-background; default: white
--tjs-menu-focus-indicator-border - fallback: --tjs-default-focus-indicator-border; default: undefined
--tjs-menu-focus-indicator-border-radius - fallback: --tjs-default-focus-indicator-border-radius; default: 0.1em
--tjs-menu-focus-indicator-height - fallback: --tjs-default-focus-indicator-height; default: undefined
--tjs-menu-focus-indicator-width - fallback: --tjs-default-focus-indicator-width; default: 0.25em
--tjs-menu-focus-indicator-transition - fallback: --tjs-default-focus-indicator-transition
Copy