Menuitems

Prinzipien

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spacing

a.simplr-menu-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--ark-simplr--mi-p-y) var(--ark-simplr-mi-p-x);
  border-radius: var(--ark-simplr-mi-radius);
  background-color: var(--ark-simplr-mi-bg);
  color: var(--ark-simplr-text-color);
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Grouping

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Variants

Menu Items können verschiedene Varianten haben, die durch ihre Darstellung zur Nutzerfreundlichkeit oder dem Kontext beitragen. Bei der Auswahl einer Variante sollte darauf geachtet werden, wie diese zur Funktion beiträgt. Es ist möglich Varianten miteinander zu kombinieren.

Varianten können u. a. sein:

• Default – Standard
• Hover – Anzeige bei Berührung mit dem Mauszeiger
• Active – Anzeige bei einem aktiven Menüpunkt, z. B. in der Seitennavigation
• Pressed – Dient bei Nutzerinteraktion als Feedback, dass das Menu Item geklickt wurde
• Disabled – Wird verwendet, wenn keine Nutzerinteraktion möglich ist
• Danger – Wird verwendet, wenn auf kritische Aktionen hingewiesen werden soll (z. B. Löschen)
• Has subpage – Wird verwendet, wenn auf eine Nutzerinteraktionen eine Unterseite folgt
• Has Icon – Wird verwendet, wenn das Menu Item dekorativ hervorgehoben werden soll (z. B. in einer Navigation)
• Has Icon Active – Anzeige bei Berührung mit dem Mauszeiger

Guidelines