updated header documentation.

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

@@ -20,43 +20,39 @@ import * as AllExamples from 'examples';
 
 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.
 
+## Usage
+
+The main `<header>` compnent is consisted of various subcomponents and can be customized accordingly 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, allowing users to interact. For the 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.
+
 ## Customizations
 
 Alter standard header section by adding new custom elements and content.
 
-### Header with MenuItems
+### Full Header
 
-Have default header with menu items using `breadcrumbs` prop.
+Have default header with additional items.
 
-<LiveExample src='Header.menuitems.tsx'>
+<LiveExample src='Header.full.tsx'>
   <AllExamples.HeaderFullExample client:load />
 </LiveExample>
 
 ### Slim Header
 
-Make header slim using `isSlim` property.
+Make header slim using `isSlim` property. This can be used when working in a 3D environment.
 
 <LiveExample src='Header.slim.tsx'>
   <AllExamples.HeaderSlimExample client:load />
 </LiveExample>
 
-### Center Content
-
-Have header with content placed in center.
-
-<LiveExample src='Header.center.tsx'>
-  <AllExamples.HeaderCenterExample client:load />
-</LiveExample>
-
-## Consolidated header
-
-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.
-
 ## 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 [article](https://www.freecodecamp.org/news/how-to-add-skip-to-main-content-links-to-a-website/), and check out the Skip to main content [component](https://itwin.github.io/iTwinUI/react/?path=/story/core-skiptocontentlink--basic).
+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 article, and check out the Skip to main content component.
 
 ## Props
 

examples/Header.main.tsx

@@ -3,12 +3,29 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Avatar, Header, HeaderLogo, IconButton } from '@itwin/itwinui-react';
-import SvgNotification from '@itwin/itwinui-icons-react/cjs/icons/Notification';
-import SvgHelpCircularHollow from '@itwin/itwinui-icons-react/cjs/icons/HelpCircularHollow';
+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
       appLogo={
@@ -18,21 +35,36 @@ export default () => {
               <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}
+            />,
+            <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
-          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'

examples/Header.slim.tsx

@@ -3,7 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { action } from '@storybook/addon-actions';
 import {
   Avatar,
   Header,
@@ -13,8 +12,6 @@ import {
   IconButton,
   MenuItem,
 } from '@itwin/itwinui-react';
-import SvgNotification from '@itwin/itwinui-icons-react/cjs/icons/Notification';
-import SvgHelpCircularHollow from '@itwin/itwinui-icons-react/cjs/icons/HelpCircularHollow';
 
 export default () => {
   const menuItems = (close: () => void) => [
@@ -51,20 +48,24 @@ export default () => {
               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
-          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'

examples/index.tsx

@@ -622,18 +622,14 @@ import { default as HeaderMainExampleRaw } from './Header.main';
 const HeaderMainExample = withThemeProvider(HeaderMainExampleRaw);
 export { HeaderMainExample };
 
-import { default as HeaderFullExampleRaw } from './Header.menuitems';
+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 HeaderCenterExampleRaw } from './Header.center';
-const HeaderCenterExample = withThemeProvider(HeaderCenterExampleRaw);
-export { HeaderCenterExample };
-
 // ----------------------------------------------------------------------------
 
 import { default as InformationPanelMainExampleRaw } from './InformationPanel.main';