Menu Item Component

warning

Components is not ready yet.

Figma

The glu-menu-label component represents an item in a menu, supporting different types such as labels, dropdowns, and buttons. It allows flexible content placement using slots.

---

Basic Usage

HTML

Result

Loading...

Live Editor

<div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
  <glu-menu-label type="label">
    Label Item
  </glu-menu-label>

  <glu-menu-label type="dropdown">
    <div>Dropdown Item</div>
    <div slot="dropdown-content">Dropdown Content</div>
  </glu-menu-label>

  <glu-menu-label type="button">
    <glu-button>Button Item</glu-button>
  </glu-menu-label>
</div>

React

Result

Loading...

Live Editor

import { GluMenuItem, GluButton } from '@gelato-ui/react';

function App() {
  return (
    <>
      <GluMenuItem type="label">Label Item</GluMenuItem>
      <GluMenuItem type="dropdown">
        <div slot="dropdown-trigger">Dropdown Item</div>
        <div slot="dropdown-content">Dropdown Content</div>
      </GluMenuItem>
      <GluMenuItem type="button">
        <GluButton>Button Item</GluButton>
      </GluMenuItem>
    </>
  );
}

Vue

Result

Loading...

Live Editor

<glu-menu-label type="label">Label Item</glu-menu-label>

<glu-menu-label type="dropdown">
  <template #dropdown-trigger>Dropdown Item</template>
  <template #dropdown-content>Dropdown Content</template>
</glu-menu-label>

<glu-menu-label type="button">
  <glu-button>Button Item</glu-button>
</glu-menu-label>

<script setup>
import { GluMenuItem } from '@gelato-ui/vue';
</script>

Angular

Result

Loading...

Live Editor

<glu-menu-label type="label">Label Item</glu-menu-label>

<glu-menu-label type="dropdown">
  <div slot="dropdown-trigger">Dropdown Item</div>
  <div slot="dropdown-content">Dropdown Content</div>
</glu-menu-label>

<glu-menu-label type="button">
  <glu-button>Button Item</glu-button>
</glu-menu-label>

Result

Loading...

Live Editor

import { Component } from '@angular/core';
import { GluMenuItem } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluMenuItem],
  template: `
    <glu-menu-label type="label">Label Item</glu-menu-label>
    <glu-menu-label type="dropdown">
      <div slot="dropdown-trigger">Dropdown Item</div>
      <div slot="dropdown-content">Dropdown Content</div>
    </glu-menu-label>
    <glu-menu-label type="button">
      <glu-button>Button Item</glu-button>
    </glu-menu-label>
  `
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
href	href	URL to navigate to when clicking the label.	string	undefined

Slots

Slot	Description
	The text content of the menu label.

---

Built with StencilJS