Header

Header sits at the top of a page and is part of a consistent user experience and navigation.

import * as React from 'react';
import {
  Avatar,
  Header,
  HeaderBreadcrumbs,
  HeaderButton,
  HeaderLogo,
  IconButton,
  MenuItem,
} from '@itwin/itwinui-react';
import { SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <Header
      appLogo={<HeaderLogo logo={<SvgPlaceholder />}>Acme</HeaderLogo>}
      breadcrumbs={
        <HeaderBreadcrumbs
          items={[
            <HeaderButton
              key='project'
              name='Project A'
              description='YJC-2249'
              onClick={() => {}}
            />,
            <HeaderButton
              key='iModel'
              name='iModel B'
              startIcon={
                <img src='https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png' />
              }
              onClick={() => {}}
            />,
          ]}
        />
      }
      actions={[
        <IconButton styleType='borderless' aria-label='View profile'>
          <Avatar abbreviation='TR' title='Terry Rivers' />
        </IconButton>,
      ]}
    />
  );
};

The first thing most people look at when they arrive at a new web page is the header. The header contains vital information about your company’s name and function, as well as the purpose of the specific page.

Usage

Header consists of various subcomponents and can be customized by modifying its props.

Logo can be added using the appLogo prop and specifying the desired logo under the <HeaderLogo> subcomponent.
Breadcrumbs trail can be implemented using the breadcrumbs prop and <HeaderBreadcrumbs> subcomponent. Individual buttons can be added within the breadcrumbs trail using the <HeaderButton> subcomponent.
The actions prop can be used to add any arbitrary buttons and content near the right end of the header.
The menuItems prop can be used to show any additional actions inside an overflow menu located to the right of actions.

import React from 'react';
import {
  Header,
  HeaderBreadcrumbs,
  HeaderButton,
  HeaderLogo,
  IconButton,
  MenuItem,
  Avatar,
} from '@itwin/itwinui-react';
import { SvgNotification, SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  const menuItems = (close) => [
    <MenuItem key={1} value={'Item #1'} onClick={close}>
      Item #1
    </MenuItem>,
    <MenuItem key={2} value={'Item #2'} onClick={close}>
      Item #2
    </MenuItem>,
    <MenuItem key={3} value={'Item #3'} onClick={close}>
      Item #3
    </MenuItem>,
  ];

  return (
    <Header
      appLogo={<HeaderLogo logo={<SvgPlaceholder />}>Acme</HeaderLogo>}
      breadcrumbs={
        <HeaderBreadcrumbs
          items={[
            <HeaderButton
              key='project'
              name='Project A'
              description='YJC-2249'
              onClick={() => {}}
              menuItems={menuItems}
            />,
            <HeaderButton
              as='a'
              href=''
              key='iModel'
              name='iModel B'
              startIcon={
                <img src='https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png' />
              }
            />,
            <HeaderButton
              key='version'
              name='Version C'
              menuItems={menuItems}
              isActive={true}
            />,
          ]}
        />
      }
      actions={[
        <IconButton
          key='notif'
          styleType='borderless'
          aria-label='View Notifications'
        >
          <SvgNotification />
        </IconButton>,
        <IconButton styleType='borderless' aria-label='View Profile'>
          <Avatar abbreviation='TR' title='Terry Rivers' />
        </IconButton>,
      ]}
      menuItems={menuItems}
    />
  );
};

`<HeaderButton>` subcomponent

HeaderButton is designed to offer a range of behaviors that are dependent on the props that are passed to it.

onClick prop: behaves like a standard button.
as='a' and href props: behaves like a regular anchor link.
menuItems prop: behaves like a dropdown button.
Both menuItems and onClick/href props: behaves like a split button, where the left part is the main button/link and the right part opens a dropdown menu.

The isActive prop can be used to indicate the current breadcrumb.

Slim Header

Make header slim using isSlim property. This property is helpful when the header takes too much space or when working in a 3D environment.

import * as React from 'react';
import {
  Avatar,
  Header,
  HeaderBreadcrumbs,
  HeaderButton,
  HeaderLogo,
  IconButton,
  MenuItem,
} from '@itwin/itwinui-react';
import { SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  const menuItems = (close) => [
    <MenuItem key={1} value={'Item #1'} onClick={close}>
      Item #1
    </MenuItem>,
    <MenuItem key={2} value={'Item #2'} onClick={close}>
      Item #2
    </MenuItem>,
    <MenuItem key={3} value={'Item #3'} onClick={close}>
      Item #3
    </MenuItem>,
  ];

  return (
    <Header
      isSlim
      appLogo={<HeaderLogo logo={<SvgPlaceholder />}>Acme</HeaderLogo>}
      breadcrumbs={
        <HeaderBreadcrumbs
          items={[
            <HeaderButton
              key='project'
              name='Project A'
              description='YJC-2249'
              onClick={() => {}}
              menuItems={menuItems}
            />,
            <HeaderButton
              key='iModel'
              name='iModel B'
              startIcon={
                <img src='https://itwinplatformcdn.azureedge.net/iTwinUI/stadium.png' />
              }
              onClick={() => {}}
            />,
            <HeaderButton
              key='version'
              name='Version C'
              menuItems={menuItems}
              isActive={true}
            />,
          ]}
        />
      }
      actions={[
        <IconButton styleType='borderless' aria-label='View profile'>
          <Avatar abbreviation='TR' title='Terry Rivers' />
        </IconButton>,
      ]}
    />
  );
};

Accessibility

For accessibility reasons, certain users strictly use their keyboard for navigating digital interfaces. We need to ensure the header doesn’t get in the way of these users every time they want to access a page’s main content. To make their experience more efficient, include a Skip to main content link to allow keyboard users to bypass the navigation header and skip directly to the page’s content.

Without such a link, keyboard users will need to tab through the entire header every time they land on a new page. This makes their experience tedious and time-consuming. For more information, check out the SkipToContentLink component.

Props

Prop	Description	Default
appLogo	Application logo. (expects `HeaderLogo`) ReactNode
breadcrumbs	Content on the right of the application button (expects `HeaderBreadcrumbs`) ReactNode
actions	Content displayed to the left of the `menuItems` (expects array of icons/avatars wrapped in `IconButton` and/or `DropdownMenu`). ReactNode[]
children	Children is put in the center of the Header. ReactNode
menuItems	Items in the more dropdown menu. Pass a function that takes the `close` argument (to close the menu), and returns a list of `MenuItem` components. (close: () => void) => Element[]
isSlim	If true, the header height is reduced, typically used when viewing 3D content. boolean	false
translatedStrings	Provide localized strings. HeaderTranslations
as	"symbol" \| "object" \| "header" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| ... 159 more ... \| FunctionComponent<...>

Usage

<HeaderButton> subcomponent

Slim Header

Accessibility

Props

`<HeaderButton>` subcomponent