Default Gray Amethyst

Header Menu

<mo-header-menu> | MOHeaderMenu
Since 1.5 stable

Header menus are used inside the Header to add options for user navigation.

Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 
<mo-header-menu label="Menu #2" slot="left-menu">
  <mo-menu-item>Dropdown Item 1</mo-menu-item>
  <mo-divider style="--spacing: 0"></mo-divider>
  <mo-menu-item>Dropdown Item 2</mo-menu-item>
  <mo-divider style="--spacing: 0"></mo-divider>
  <mo-menu-item>Dropdown Item 3</mo-menu-item>
</mo-header-menu>

import React, { CSSProperties } from 'react';
import { MOHeaderMenu, MODivider, MOMenuItem} from '@metsooutotec/modes-web-components/dist/react';

export interface dividerCSS extends CSSProperties {
  '--spacing': number;
}

const App = () => (
  <>
    <MOHeaderMenu label="Menu" slot="left-menu">
      <MOMenuItem>Dropdown Item 1</MOMenuItem>
      <MODivider
        style={
          {
            '--spacing': 0,
          } as dividerCSS
        }
      >
      </MODivider>
      <MOMenuItem>Dropdown Item 2</MOMenuItem>
      <MODivider
        style={
          {
            '--spacing': 0,
          } as dividerCSS
        }
      >
      </MODivider>
      <MOMenuItem>Dropdown Item 3</MOMenuItem>
    </MOHeaderMenu>
  </>
);

Examples

With an icon

An icon can be added to the HeaderMenu by simply using the iconName property.

Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 
<mo-header-menu iconName="settings" label="Menu #2" slot="left-menu">
  <mo-menu-item>Dropdown Item 1</mo-menu-item>
  <mo-divider style="--spacing: 0"></mo-divider>
  <mo-menu-item>Dropdown Item 2</mo-menu-item>
  <mo-divider style="--spacing: 0"></mo-divider>
  <mo-menu-item>Dropdown Item 3</mo-menu-item>
</mo-header-menu>

import React, { CSSProperties } from 'react';
import { MOHeaderMenu, MODivider, MOMenuItem} from '@metsooutotec/modes-web-components/dist/react';

export interface dividerCSS extends CSSProperties {
  '--spacing': number;
}

const App = () => (
  <>
    <MOHeaderMenu iconName="settings" label="Menu #2" slot="left-menu">
      <MOMenuItem>Dropdown Item 1</MOMenuItem>
      <MODivider
        style={
          {
            '--spacing': 0,
          } as dividerCSS
        }
      >
      </MODivider>
      <MOMenuItem>Dropdown Item 2</MOMenuItem>
      <MODivider
        style={
          {
            '--spacing': 0,
          } as dividerCSS
        }
      >
      </MODivider>
      <MOMenuItem>Dropdown Item 3</MOMenuItem>
    </MOHeaderMenu>
  </>
);

Only icon + badge

Header menus can be just an icon and also include a badge, to indicate e.g., notifications.

9 New notifications 
<mo-header-menu noCaret iconName="notification" slot="right-menu">
  <mo-badge slot="badge" variant="alert" pill>9</mo-badge>
  <mo-menu-item><mo-icon slot="prefix" name="notification"></mo-icon>New notifications</mo-menu-item>
</mo-header-menu>

Selectable menus

You can create header menus where the mo-menu-item children are selectable, so that the current selected one stays highlighted. This can be useful for example if you are using the header menus for routing between pages to indicate which page is now active.

Selectable Item 1 Selectable Item 2 Selectable Item 3 
<mo-header-menu selectable label="Selectable Menu" slot="left-menu">
  <mo-menu-item>Selectable Item 1</mo-menu-item>
  <mo-divider style="--spacing: 0"></mo-divider>
  <mo-menu-item>Selectable Item 2</mo-menu-item>
  <mo-divider style="--spacing: 0"></mo-divider>
  <mo-menu-item>Selectable Item 3</mo-menu-item>
</mo-header-menu>

import React, { CSSProperties } from 'react';
import { MOHeaderMenu, MODivider, MOMenuItem} from '@metsooutotec/modes-web-components/dist/react';

export interface dividerCSS extends CSSProperties {
  '--spacing': number;
}

const App = () => (
  <>
    <MOHeaderMenu selectable label="Selectable Menu" slot="left-menu">
      <MOMenuItem>Selectable Item 1</MOMenuItem>
      <MODivider
        style={
          {
            '--spacing': 0,
          } as dividerCSS
        }
      >
      </MODivider>
      <MOMenuItem>Selectable Item 2</MOMenuItem>
      <MODivider
        style={
          {
            '--spacing': 0,
          } as dividerCSS
        }
      >
      </MODivider>
      <MOMenuItem>Selectable Item 3</MOMenuItem>
    </MOHeaderMenu>
  </>
);

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/header-menu/header-menu.js';

To import this component as a React component:

import MOHeaderMenu from '@metsooutotec/modes-web-components/dist/react/header-menu/';

To import this component using a script tag:

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

Slots

Name Description
(default) The default slot. Add mo-menu-items here.
badge Badges can be slotted in here, they should position automatically.

Learn more about using slots.

Properties

Name Description Reflects Type Default
dropdown The dropdown element. MODropdown -
menu The menu element MOMenu -
label The label in the button. string ''
iconName An example property. string ''
noCaret Whether the button should include a caret. boolean false
open Whether the dropdown is open. boolean false
selectable Whether the menu items are selectable. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--min-width Minimum width of the header menu, 40px by default.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s internal wrapper.
button The button to open the menu.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.