Diggi Docs
MenuItem
Das Menu Item ist das kleinste Element eines Menüs. Es wird am häufigsten als Context Menu verwendet. Das Menu Item führt den Nutzer zu zusätzliche Informationen in einem zweiten Menü, in dem der Benutzer dann Einstellungen konfigurieren oder Optionen festlegen kann.

Verwendung

Es wird in diesen Komponenten und Patterns des Bosch UI Kit verwendet:
  • Context Menu
  • Side Navigation

Eigenschaften

NameTypeDefault ValueDescription

label

string

undefined

Label to display inside the menu item.

secondaryLabel

string

undefined

optional - additional label for the menu item

isIndent

boolean

undefined

optional - if set to true, menuitem content will be place with indentation

iconName

string

undefined

optional - The icon to display if the menu item has one.

arrow

undefined

undefined

hasDivider

boolean

undefined

Wheter or not the menu item has a divider after it.

disabled

boolean

undefined

Wheter or not the menu item is disabled.

isActive

boolean

undefined

optional - if set to true, a checkmark will be placed at the left of the component

isSelected

boolean

undefined

optional - if set to true, component is visualized with the contrast background to indicate selection

url

string

undefined

The menu item's link.

groupId

string

undefined

The item groups' Id. It syncs the controllers via the aria-controls and the Id.

target

"_blank"|"_self"|undefined

undefined

The link

preloadData

"hover"|"tap"|undefined

undefined

The preload data

preloadCode

"eager"|"viewport"|"hover"|"tap"|undefined

undefined

The preload code

reload

true|""|"off"|null|undefined

undefined

The reload

replaceState

true|""|"off"|undefined|null

undefined

The replace state

noScroll

true|""|"off"|undefined|null

undefined

The no scroll

isOpen

boolean

false

Show or hide children

style

string

undefined

HTML style

Events

NameDescription

click

click


Beispiele

Defaul

With Icon

With secondary label

With badge

With arrow right

  • With arrow down

  • With icon and secondary label

    With icon, secondary label and badge

    With icon, secondary label, badge and arrow right

  • With icon, secondary label, badge and arrow down

  • With icon, secondary label, badge, arrow down and divider


  • With icon, secondary label, badge and arrow down disabled

  • With icon, secondary label, badge, arrow down and divider disabled


  • Active

  • Indent

  • Indent with divider


  • Indent active

  • Indent disabled

  • Indent active disabled

  • Indent selected

  • Indent active selected