updated header documentation.

apps/website/src/pages/docs/header.mdx

@@ -1,6 +1,6 @@
 ---
 title: Header
-description: An overview of the CONNECT Portal headers
+description: Header sits at the top of a page and is part of a consistent user experience and navigation.
 layout: ./_layout.astro
 propsPath: '@itwin/itwinui-react/esm/core/Header/Header.d.ts'
 thumbnail: Header
@@ -14,68 +14,45 @@ import * as AllExamples from 'examples';
 
 <p>{frontmatter.description}</p>
 
-<Placeholder componentPageName='core-header' />
-
 <LiveExample src='Header.main.tsx'>
   <AllExamples.HeaderMainExample client:load />
 </LiveExample>
 
-The headers seen when in our CONNECT Portal environment. A header sits at the top of a page and is part of a consistent user experience.
-
-## Main CONNECT Portal header
-
-The CONNECT portal header contains the services menu, home, enterprise, assets and projects links beginning from left to right. From right to left there is the user profile, help, and notification links.
+The first thing most people look at when they arrive at a new web page is the header. It is usually stuck at the top of the page. The header contains vital information about your company's name and function, as well as the purpose of the specific page.
 
-Header with circular callouts, numbered from 1 to 8.
+## Usage
 
-- Services menu
-- Home page
-- Enterprise portal
-- Assets menu
-- Projects menu
-- Notifications
-- Help
-- User icon
+`<Header>` consists of various subcomponents and can be customized by modifying its props.
 
-### Actions
+- 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. For a dropdown menu, the `menuItems` prop can be used inside the `<HeaderButton>` for showing items and `onClick()` properties for handling actions.
+- Buttons/Icons/Content can be displayed towards the left of menuitems using the `actions` prop.
 
-- Services menu pops up a list of services available to the user.
-- Home page takes you to CONNECT Center.
-- Enterprise Portal takes you to the Subscription Services Portal.
-- Assets menu takes you to the assets page.
-- Projects menu takes you to the ProjectWise Projects page.
-- Notifications pops up your list of notifications.
-- Help takes you to Bentley Communities for Bentley Cloud and Web Services.
-- User profile is a drop down with options for your user profile.
+## Customizations
 
-## Secondary header
+Alter standard header section by adding new custom elements and content.
 
-The secondary header contains the product icon, product name, iModel name and the name of the initially opened view. On the right side of the bar is the settings menu.
+### Full Header
 
-Secondary header with circular callouts, numbered from 1 to 5.
+Default header with additional items.
 
-- Product icon
-- Product name
-- iModel name
-- View name
-- Settings
-
-### Actions
+<LiveExample src='Header.full.tsx'>
+  <AllExamples.HeaderFullExample client:load />
+</LiveExample>
 
-- Click the product name to get to the iModel Manager and display a list of iModels in the current project.
-- Click the iModel name to take you to the iModel manager > iModel details page.
-- Clicking on the view name will take you to the iModel index page.
-- Clicking on the settings icon will open the settings menu.
+### Slim Header
 
-## Consolidated header
+Make header slim using `isSlim` property. This can be used when working in a 3D environment.
 
-One of the top complaints we received was that our headers visibly takes up too much space on the screen. When the user is focusing on their work, we use the consolidated header. Additional data can be displayed based on hover and/or where you are located within the app. For example, when in a 3D working environment you’ll see the consolidated header, but when you switch to the backstage you see the normal header.
+<LiveExample src='Header.slim.tsx'>
+  <AllExamples.HeaderSlimExample client:load />
+</LiveExample>
 
 ## 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, read the Skip to main content link article, and check out the Skip to main content component demo.
+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 Skip to main content component.
 
 ## Props
 

examples/Header.full.tsx

@@ -0,0 +1,86 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import {
+  DropdownMenu,
+  getUserColor,
+  Header,
+  HeaderBreadcrumbs,
+  HeaderButton,
+  HeaderLogo,
+  IconButton,
+  MenuItem,
+  Avatar,
+} from '@itwin/itwinui-react';
+import SvgHelpCircularHollow from '@itwin/itwinui-icons-react/cjs/icons/HelpCircularHollow';
+import SvgNotification from '@itwin/itwinui-icons-react/cjs/icons/Notification';
+
+export default () => {
+  const menuItems = (close: () => void) => [
+    <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={
+            <svg viewBox='0 0 16 16' aria-hidden='true'>
+              <path d='m12.6 13.4c-1.2-1.5-2.1-3.1-2.4-5.5-2.7 3.9-4.6 4.2-5.7 2.4l-1.2 5.7h-2.2l3.5-14.1 1.8-.4c-.1.5-1.4 6.2.6 7 2 .7 4.6-8.5 4.6-8.5l2.2.4c-1.6 3.7-1.6 7.6 1.1 10.9l-2.3 2.1' />
+            </svg>
+          }
+        >
+          Microstation
+        </HeaderLogo>
+      }
+      breadcrumbs={
+        <HeaderBreadcrumbs
+          items={[
+            <HeaderButton
+              key='project'
+              name='Project A (Super Size Edition)'
+              description='YJC-2249'
+              onClick={() => {}}
+              menuItems={menuItems}
+            />,
+          ]}
+        />
+      }
+      actions={[
+        <IconButton
+          key='notif'
+          onClick={() => action('Clicked on the notification bell')()}
+          styleType='borderless'
+        >
+          <SvgNotification />
+        </IconButton>,
+        <IconButton styleType='borderless' aria-label='help'>
+          <SvgHelpCircularHollow />
+        </IconButton>,
+        <IconButton styleType='borderless' aria-label='View Profile'>
+          <Avatar
+            size='medium'
+            abbreviation='TR'
+            backgroundColor={getUserColor('Terry Rivers')}
+            image={
+              <img src='https://itwinplatformcdn.azureedge.net/iTwinUI/user-placeholder.png' />
+            }
+            title='Terry Rivers'
+          />
+        </IconButton>,
+      ]}
+      menuItems={menuItems}
+    />
+  );
+};

examples/Header.slim.tsx

@@ -0,0 +1,82 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import {
+  Avatar,
+  Header,
+  HeaderBreadcrumbs,
+  HeaderButton,
+  HeaderLogo,
+  IconButton,
+  MenuItem,
+} from '@itwin/itwinui-react';
+
+export default () => {
+  const menuItems = (close: () => void) => [
+    <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={
+            <svg viewBox='0 0 16 16' aria-hidden='true'>
+              <path d='m12.6 13.4c-1.2-1.5-2.1-3.1-2.4-5.5-2.7 3.9-4.6 4.2-5.7 2.4l-1.2 5.7h-2.2l3.5-14.1 1.8-.4c-.1.5-1.4 6.2.6 7 2 .7 4.6-8.5 4.6-8.5l2.2.4c-1.6 3.7-1.6 7.6 1.1 10.9l-2.3 2.1' />
+            </svg>
+          }
+        />
+      }
+      breadcrumbs={
+        <HeaderBreadcrumbs
+          items={[
+            <HeaderButton
+              key='project'
+              name='Project A (Super Size Edition)'
+              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
+            size='medium'
+            abbreviation='TR'
+            image={
+              <img src='https://itwinplatformcdn.azureedge.net/iTwinUI/user-placeholder.png' />
+            }
+            title='Terry Rivers'
+          />
+        </IconButton>,
+      ]}
+    />
+  );
+};

examples/index.tsx

@@ -622,6 +622,14 @@ import { default as HeaderMainExampleRaw } from './Header.main';
 const HeaderMainExample = withThemeProvider(HeaderMainExampleRaw);
 export { HeaderMainExample };
 
+import { default as HeaderFullExampleRaw } from './Header.full';
+const HeaderFullExample = withThemeProvider(HeaderFullExampleRaw);
+export { HeaderFullExample };
+
+import { default as HeaderSlimExampleRaw } from './Header.slim';
+const HeaderSlimExample = withThemeProvider(HeaderSlimExampleRaw);
+export { HeaderSlimExample };
+
 // ----------------------------------------------------------------------------
 
 import { default as InformationPanelMainExampleRaw } from './InformationPanel.main';