Default Gray Amethyst

Header

<mo-header> | MOHeader
Since 1.5 stable

Headers are used to display important information and actions at the top of a page.

The Header is a navigation element displaying the Metso logo and application name, and containing main page links, dropdown menus and global actions. It should be present in all views.

Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Settings Log-out Preferences Accessibility 9 New notifications 
<mo-header contained>
  <mo-header-menu label="Menu #1" 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>
  <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>
  <mo-divider vertical style="--spacing: var(--mo-spacing-x-small); height: 80%;" slot="profile-menu"></mo-divider>
  <mo-header-menu noCaret slot="profile-menu">
    <mo-icon slot="icon" name="person" style="font-size: 1.5rem"></mo-icon>
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Settings</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="logout"></mo-icon>Log-out</mo-menu-item>
  </mo-header-menu>
  <mo-header-menu noCaret iconName="settings" slot="right-menu">
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Preferences</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="colors"></mo-icon>Accessibility</mo-menu-item>
  </mo-header-menu>
  <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>
</mo-header>
<div class="header-demo-content"></div>

<style>
  .header-demo-content {
    height: 50vh;
  }

  /** Change code preview for documentation page examples */
  .code-preview__preview {
    padding: 0;
    border-right: 1px solid var(--mo-color-neutral-90);
  }
  .code-preview__resizer {
    display: none;
  }
</style>

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

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

const css = `
.header-demo-content {
  height: 50vh;
}
`;

const App = () => (
  <>
    <MOHeader>
      <MOHeaderMenu label="Menu #1" 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>
      <MOHeaderMenu 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>
      <MODivider vertical style="--spacing: var(--mo-spacing-x-small); height: 80%;" slot="profile-menu"></MODivider>
      <MOHeaderMenu noCaret iconName="person" slot="profileMenu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Settings
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="logout"></MOIcon>Log-out
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="settings" slot="right-menu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Preferences
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="colors"></MOIcon>Accessibility
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="notification" slot="right-menu">
        <MOBadge slot="badge" variant="alert" pill>
          9
        </MOBadge>
        <MOMenuItem>
          <MOIcon slot="prefix" name="notification"></MOIcon>New notifications
        </MOMenuItem>
      </MOHeaderMenu>
    </MOHeader>
    <div className="header-demo-content"></div>
    <style>{css}</style>
  </>
);

Examples

With no hamburger menu and custom title

The Header has props noHamburgerMenu and title that can customize the way it looks.

Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Settings Log-out Preferences Accessibility 9 New notifications 
<mo-header contained title="Metrics" noHamburgerMenu>
  <mo-header-menu label="Menu" slot="left-menu">
    <mo-menu-item>Dropdown Item 1</mo-menu-item>
    <mo-menu-item>Dropdown Item 2</mo-menu-item>
    <mo-menu-item>Dropdown Item 3</mo-menu-item>
  </mo-header-menu>
  <mo-divider vertical style="--spacing: var(--mo-spacing-x-small); height: 80%;" slot="profile-menu"></mo-divider>
  <mo-header-menu noCaret iconName="person" slot="profile-menu">
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Settings</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="logout"></mo-icon>Log-out</mo-menu-item>
  </mo-header-menu>
  <mo-header-menu noCaret iconName="settings" slot="right-menu">
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Preferences</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="colors"></mo-icon>Accessibility</mo-menu-item>
  </mo-header-menu>
  <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>
</mo-header>
<div class="header-demo-content"></div>

<style>
  .header-demo-content {
    height: 50vh;
  }
</style>

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

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

const css = `
.header-demo-content {
  height: 50vh;
}
`;

const App = () => (
  <>
    <MOHeader title="Metrics" noHamburgerMenu>
      <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>

      <MODivider vertical style="--spacing: var(--mo-spacing-x-small); height: 80%;" slot="profile-menu"></MODivider>
      <MOHeaderMenu noCaret iconName="person" slot="profileMenu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Settings
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="logout"></MOIcon>Log-out
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="settings" slot="right-menu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Preferences
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="colors"></MOIcon>Accessibility
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="notification" slot="right-menu">
        <MOBadge slot="badge" variant="alert" pill>
          9
        </MOBadge>
        <MOMenuItem>
          <MOIcon slot="prefix" name="notification"></MOIcon>New notifications
        </MOMenuItem>
      </MOHeaderMenu>
    </MOHeader>
    <div className="header-demo-content"></div>
    <style>{css}</style>
  </>
);

With sidebar and page title

A common use case with the Header is including a Sidebar below it. Here’s an example of how the component structure should look like.

Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Settings Log-out Preferences Accessibility 9 New notifications
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Action #1 Action #2
Home Services Web design
Edit Add
General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<mo-header contained>
  <mo-header-menu label="Menu #1" 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>
  <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>
  <mo-divider vertical style="--spacing: var(--mo-spacing-x-small); height: 80%;" slot="profile-menu"></mo-divider>
  <mo-header-menu noCaret iconName="person" slot="profile-menu">
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Settings</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="logout"></mo-icon>Log-out</mo-menu-item>
  </mo-header-menu>
  <mo-header-menu noCaret iconName="settings" slot="right-menu">
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Preferences</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="colors"></mo-icon>Accessibility</mo-menu-item>
  </mo-header-menu>
  <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>
</mo-header>
<div class="header-demo-container">
  <mo-sidebar label="Sidebar title">
    <div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    <mo-button slot="footer" variant="primary">Action #1</mo-button>
    <mo-button slot="footer" variant="secondary">Action #2</mo-button>
    <mo-page-title title="Example title">
      <div slot="breadcrumbs">
        <mo-breadcrumb>
          <mo-breadcrumb-item>Home</mo-breadcrumb-item>
          <mo-breadcrumb-item>Services</mo-breadcrumb-item>
          <mo-breadcrumb-item>Web design</mo-breadcrumb-item>
        </mo-breadcrumb>
      </div>
      <div slot="right-items">
        <mo-button variant="secondary"><mo-icon slot="suffix" name="edit"></mo-icon>Edit</mo-button>
        <mo-button><mo-icon slot="suffix" name="plus"></mo-icon>Add</mo-button>
      </div>
      <mo-tab-group slot="tabs">
        <mo-tab slot="nav" panel="general">General</mo-tab>
        <mo-tab slot="nav" panel="custom">Custom</mo-tab>
        <mo-tab slot="nav" panel="advanced">Advanced</mo-tab>
        <mo-tab slot="nav" panel="disabled" disabled>Disabled</mo-tab>

        <mo-tab-panel name="general">This is the general tab panel.</mo-tab-panel>
        <mo-tab-panel name="custom">This is the custom tab panel.</mo-tab-panel>
        <mo-tab-panel name="advanced">This is the advanced tab panel.</mo-tab-panel>
        <mo-tab-panel name="disabled">This is a disabled tab panel.</mo-tab-panel>
      </mo-tab-group>
    </mo-page-title>
  </mo-sidebar>
  <div>
    <style>
      .header-demo-container {
        height: 50vh;
        /* The sidebar parent must have position: relative. */
        position: relative;
      }
      .demo-content {
        padding: 1rem;
        width: 100%;
        height: 100%;
      }
    </style>
  </div>
</div>

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

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

const css = `
.header-demo-content {
  height: 50vh;
  /* The sidebar parent must have position: relative. */
  position: relative;
  }
  .demo-content {
    padding: 1rem;
    width: 100%;
    height: 100%;
  }
}
`;

const App = () => (
  <>
    <MOHeader>
      <MOHeaderMenu label="Menu #1" 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>
      <MOHeaderMenu 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>
      <MODivider vertical style="--spacing: var(--mo-spacing-x-small); height: 80%;" slot="profile-menu"></MODivider>
      <MOHeaderMenu noCaret iconName="person" slot="profileMenu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Settings
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="logout"></MOIcon>Log-out
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="settings" slot="right-menu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Preferences
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="colors"></MOIcon>Accessibility
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="notification" slot="right-menu">
        <MOBadge slot="badge" variant="alert" pill>
          9
        </MOBadge>
        <MOMenuItem>
          <MOIcon slot="prefix" name="notification"></MOIcon>New notifications
        </MOMenuItem>
      </MOHeaderMenu>
    </MOHeader>
    <div className="header-demo-content"></div>
      <MOSidebar label="Sidebar title">
        <div slot="body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
          <MOButton slot="footer" variant="primary">Action #1</MOButton>
          <MOButton slot="footer" variant="secondary">Action #2</MOButton>
          <mo-page-title title="Example title">
            <div slot="breadcrumbs">
              <MOBreadcrumb>
                <MOBreadcrumbItem>Home</MOBreadcrumbItem>
                <MOBreadcrumbItem>Services</MOBreadcrumbItem>
                <MOBreadcrumbItem>Web design</MOBreadcrumbItem>
              </MOBreadcrumb>
            </div>
            <div slot="right-items">
              <MOButton variant="secondary"><MOIcon slot="suffix" name="edit"></MOIcon>Edit</MOButton>
              <MOButton><MOIcon slot="suffix" name="plus"></MOIcon>Add</MOButton>
            </div>
            <MOTabGroup slot="tabs">
              <MOTab slot="nav" panel="general">General</MOTab>
              <MOTab slot="nav" panel="custom">Custom</MOTab>
              <MOTab slot="nav" panel="advanced">Advanced</MOTab>
              <MOTab slot="nav" panel="disabled" disabled>Disabled</MOTab>
              <MOTabPanel name="general">This is the general tab panel.</MOTabPanel>
              <MOTabPanel name="custom">This is the custom tab panel.</MOTabPanel>
              <MOTabPanel name="advanced">This is the advanced tab panel.</MOTabPanel>
              <MOTabPanel name="disabled">This is a disabled tab panel.</MOTabPanel>
            </MOTabGroup>
          </mo-page-title>
    </MOSidebar>

    <style>{css}</style>
  </>
);

Ensuring mobile adaptiveness

In DSUI the Header is a complicated and rigid component that automatically moves the HeaderMenus to the hamburger menu on mobile breakpoints. As Modes UI components aim to be as flexible and composable as possible, ensuring mobile adaptiveness falls on the user here. This means that the header content must also be separately slotted in to the mobile-menus slot as in the example below. To see the menus, resize the window to a mobile width, the drag-to-resize in the demos does not change the window width.

Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Settings Log-out
Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 Dropdown Item 1 Dropdown Item 2 Dropdown Item 3 
<mo-header contained>
  <mo-header-menu label="Menu #1" 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>
  <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>
  <mo-header-menu noCaret iconName="person" slot="profile-menu">
    <mo-menu-item><mo-icon slot="prefix" name="settings"></mo-icon>Settings</mo-menu-item>
    <mo-divider style="--spacing: 0"></mo-divider>
    <mo-menu-item><mo-icon slot="prefix" name="logout"></mo-icon>Log-out</mo-menu-item>
  </mo-header-menu>
  <div slot="mobile-menus">
    <mo-details style="--content-padding: 0;" summary="Menu #1">
      <mo-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-menu>
    </mo-details>
    <mo-details style="--content-padding: 0;" summary="Menu #2">
      <mo-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-menu>
    </mo-details>
  </div>
</mo-header>
<div class="header-demo-content"></div>

<style>
  .header-demo-content {
    height: 50vh;
  }
</style>

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

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


export interface detailsCSS extends CSSProperties {
  '--content-padding': number;
}

const css = `
.header-demo-content {
  height: 50vh;
}
`;

const App = () => (
  <>
    <MOHeader>
      <MOHeaderMenu label="Menu #1" 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>
      <MOHeaderMenu 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>
      <MOHeaderMenu noCaret iconName="person" slot="profileMenu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Settings
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="logout"></MOIcon>Log-out
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="settings" slot="right-menu">
        <MOMenuItem>
          <MOIcon slot="prefix" name="settings"></MOIcon>Preferences
        </MOMenuItem>
        <MODivider
          style={
            {
              '--spacing': 0,
            } as dividerCSS
          }
        >
        </MODivider>
        <MOMenuItem>
          <MOIcon slot="prefix" name="colors"></MOIcon>Accessibility
        </MOMenuItem>
      </MOHeaderMenu>
      <MOHeaderMenu noCaret iconName="notification" slot="right-menu">
        <MOBadge slot="badge" variant="alert" pill>
          9
        </MOBadge>
        <MOMenuItem>
          <MOIcon slot="prefix" name="notification"></MOIcon>New notifications
        </MOMenuItem>
      </MOHeaderMenu>
      <div slot="mobile-menus">
        <MODetails
          summary="Menu #2"
          style={
            {
              '--content-padding': 0,
            } as detailsCSS
          }
        >
          <MOMenu>
            <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>
          </MOMenu>
        </MODetails>
        <MODetails
          summary="Menu #2"
          style={
            {
              '--content-padding': 0,
            } as detailsCSS
          }
        >
          <MOMenu>
            <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>
          </MOMenu>
        </MODetails>
      </div>
    </MOHeader>
    <div className="header-demo-content"></div>
  </>
  <style>{css}</style>
);

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

To import this component as a React component:

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

To import this component using a script tag:

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

Slots

Name Description
(default) The default slot, the rest of the page content should go here.
left-menu Menus on the left side of the divider go here. These should also be defined in the mobile-menus slot.
right-menu Same as left-menus, but on the other side of the divider.
mobile-menus Define the desktop menus again here to ensure they are visible on mobile breakpoints. Will be in the hamburger menu.
logo Add custom logo here.
hamburger-menu-content Add content you want in the hamburger menu here. Will be shown below mobile-menus.
profile-menu Add content next to a profile menu

Learn more about using slots.

Properties

Name Description Reflects Type Default
title An example title. string ''
menuOpen Whether the hamburger menu is open or not. Toggled with the icon-button on the top left. boolean false
noHamburgerMenu If true, no hamburger menu icon button is shown at the left side. boolean false
contained By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this prop and add position: relative to the parent. 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
--hamburger-width The width of the hamburger menu in desktop breakpoints.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s internal wrapper.
left-menus The left-menu wrapper.
right-items The right-items wrapper.
right-menus The right-menu wrapper.
mobile-menus The mobile-menu wrapper.
logo The logo wrapper.
hamburger-content Hamburger menu content wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.