Menu Label

<ahi-menu-label> | AhiMenuLabel

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

Fruits

Apple

Banana

Orange

Vegetables

Broccoli

Carrot

Zucchini

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

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/menu-label/menu-label.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/menu-label/menu-label.js';

Slots

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

Learn more about using slots.

CSS Parts

Name	Description
`base`	Deprecated. Style the host element instead.

Learn more about customizing CSS parts.