Skip to main content

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
<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>

Slots

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

Learn more about using slots.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.