Menu Label

<sl-menu-label> | SlMenuLabel

Since 2.0

stable

Menu labels are used to describe a group of menu items.

Fruits

Apple

Banana

Orange

Vegetables

Broccoli

Carrot

Zucchini

Fruits

Apple

Banana

Orange

Vegetables

Broccoli

Carrot

Zucchini

<div style="display: flex; gap: 24px;">
  <sl-menu style="max-width: 200px;">
    <sl-menu-label>Fruits</sl-menu-label>
    <sl-menu-item value="apple">Apple</sl-menu-item>
    <sl-menu-item value="banana">Banana</sl-menu-item>
    <sl-menu-item value="orange">Orange</sl-menu-item>
    <sl-divider></sl-divider>
    <sl-menu-label>Vegetables</sl-menu-label>
    <sl-menu-item value="broccoli">Broccoli</sl-menu-item>
    <sl-menu-item value="carrot">Carrot</sl-menu-item>
    <sl-menu-item value="zucchini">Zucchini</sl-menu-item>
  </sl-menu>

  <sl-menu dark style="max-width: 200px;">
    <sl-menu-label>Fruits</sl-menu-label>
    <sl-menu-item value="apple">Apple</sl-menu-item>
    <sl-menu-item value="banana">Banana</sl-menu-item>
    <sl-menu-item value="orange">Orange</sl-menu-item>
    <sl-divider></sl-divider>
    <sl-menu-label>Vegetables</sl-menu-label>
    <sl-menu-item value="broccoli">Broccoli</sl-menu-item>
    <sl-menu-item value="carrot">Carrot</sl-menu-item>
    <sl-menu-item value="zucchini">Zucchini</sl-menu-item>
  </sl-menu>
</div>

Slots

Name	Description
(default)	The menu label’s content.

Learn more about using slots.

Properties

Name	Description	Reflects	Type	Default
`dark`	Render the menu label in dark mode		`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.