Default Gray Amethyst

Menu Label

<mo-menu-label> | MOMenuLabel
Since 1.0 stable

Menu labels are used inside a menu to represent a group of related menu items.

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

import { MODivider, MOMenu, MOMenuLabel, MOMenuItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOMenu style={{ maxWidth: '200px' }}>
    <MOMenuLabel>Fruits</MOMenuLabel>
    <MOMenuItem value="apple">Apple</MOMenuItem>
    <MOMenuItem value="banana">Banana</MOMenuItem>
    <MOMenuItem value="orange">Orange</MOMenuItem>
    <MODivider />
    <MOMenuLabel>Vegetables</MOMenuLabel>
    <MOMenuItem value="broccoli">Broccoli</MOMenuItem>
    <MOMenuItem value="carrot">Carrot</MOMenuItem>
    <MOMenuItem value="zucchini">Zucchini</MOMenuItem>
  </MOMenu>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/menu-label/menu-label.js';

To import this component as a React component:

import MOMenuLabel from '@metsooutotec/modes-web-components/dist/react/menu-label/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/menu-label/menu-label.js"></script>

Slots

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

Learn more about using slots.

Parts

Name Description
base The component’s internal wrapper.

Learn more about customizing CSS parts.