Header

Header component is used to render a header bar with logo and brand name, navigation and actions.

Usage

The HvHeader component is used to create a header for your application and can be built by composition with other components. UI Kit provides a set of components to help you build your header, such as HvHeaderBrand, HvHeaderActions, and HvHeaderNavigation but you can also use your own components.

Pentaho+

<HvHeader position="relative" className="mb-lg w-full">
  <HvHeaderBrand name="Pentaho+" />
  <HvHeaderActions>
    <HvIconButton title="Open Notifications panel">
      <HvBadge count={1} icon={<Alert />} />
    </HvIconButton>
    <HvIconButton title="Open User panel">
      <User />
    </HvIconButton>
  </HvHeaderActions>
</HvHeader>

<HvHeader position="relative" className="mb-lg w-full">
  <HvHeaderBrand name="Pentaho+" />
  <HvHeaderActions>
    <HvIconButton title="Open Notifications panel">
      <HvBadge count={1} icon={<Alert />} />
    </HvIconButton>
    <HvIconButton title="Open User panel">
      <User />
    </HvIconButton>
  </HvHeaderActions>
</HvHeader>

The example below shows a simple header with a brand, navigation, and actions. If you resize the window to a smaller size, the navigation will be hidden and a menu button will appear.

Pentaho+

import { useState } from "react";


export default function Demo() {
  const width = useWidth();
  const [selected, setSelected] = useState<string>("2");


  const isLgUp = width === "lg" || width === "xl";


  return (
    <HvHeader position="relative" className="mb-lg w-full">
      {!isLgUp && (
        <HvIconButton title="Menu">
          <Menu />
        </HvIconButton>
      )}
      <HvHeaderBrand name="Pentaho+" />
      {isLgUp && (
        <HvHeaderNavigation
          data={navigationDataMain}
          selected={selected}
          onClick={(_, selectedItem) =>
            selectedItem.href
              ? setSelected(selectedItem.id)
              : setSelected(selectedItem.data[0].id)
          }
        />
      )}


      <HvHeaderActions>
        <HvIconButton title="Open Notifications panel">
          <HvBadge count={1} icon={<Alert />} />
        </HvIconButton>
        {isLgUp && (
          <HvIconButton title="Open User panel">
            <User />
          </HvIconButton>
        )}
      </HvHeaderActions>
    </HvHeader>
  );
}


const navigationDataMain = [
  {
    id: "1",
    label: "Overview",
    data: [
      {
        id: "1-1",
        label: "Model Effectiveness 1",
        href: "/overview/model-effectiveness",
      },
      {
        id: "1-2",
        label: "Trend Analysis 1-2",
        href: "/overview/trend-analysis",
      },
    ],
  },
  {
    id: "2",
    label: "Events",
    href: "/events",
  },
  {
    id: "3",
    label: "Work Orders",
    data: [
      {
        id: "3-1",
        label: "Model Effectiveness 3-1",
        href: "/work-orders/model-effectiveness",
      },
      {
        id: "3-2",
        label: "Trend Analysis 3-2",
        href: "/work-orders/trend-analysis",
      },
    ],
  },
  {
    id: "4",
    label: "Assets",
    href: "/assets",
  },
  {
    id: "5",
    label: "Analytics",
    data: [
      {
        id: "5-1",
        label: "Model Effectiveness 5-1",
        href: "/analytics/model-effectiveness",
      },
      {
        id: "5-2",
        label: "Trend Analysis 5-2",
        href: "/analytics/trend-analysis",
      },
    ],
  },
];

import { useState } from "react";

export default function Demo() {
  const width = useWidth();
  const [selected, setSelected] = useState<string>("2");

  const isLgUp = width === "lg" || width === "xl";

  return (
    <HvHeader position="relative" className="mb-lg w-full">
      {!isLgUp && (
        <HvIconButton title="Menu">
          <Menu />
        </HvIconButton>
      )}
      <HvHeaderBrand name="Pentaho+" />
      {isLgUp && (
        <HvHeaderNavigation
          data={navigationDataMain}
          selected={selected}
          onClick={(_, selectedItem) =>
            selectedItem.href
              ? setSelected(selectedItem.id)
              : setSelected(selectedItem.data[0].id)
          }
        />
      )}

      <HvHeaderActions>
        <HvIconButton title="Open Notifications panel">
          <HvBadge count={1} icon={<Alert />} />
        </HvIconButton>
        {isLgUp && (
          <HvIconButton title="Open User panel">
            <User />
          </HvIconButton>
        )}
      </HvHeaderActions>
    </HvHeader>
  );
}

const navigationDataMain = [
  {
    id: "1",
    label: "Overview",
    data: [
      {
        id: "1-1",
        label: "Model Effectiveness 1",
        href: "/overview/model-effectiveness",
      },
      {
        id: "1-2",
        label: "Trend Analysis 1-2",
        href: "/overview/trend-analysis",
      },
    ],
  },
  {
    id: "2",
    label: "Events",
    href: "/events",
  },
  {
    id: "3",
    label: "Work Orders",
    data: [
      {
        id: "3-1",
        label: "Model Effectiveness 3-1",
        href: "/work-orders/model-effectiveness",
      },
      {
        id: "3-2",
        label: "Trend Analysis 3-2",
        href: "/work-orders/trend-analysis",
      },
    ],
  },
  {
    id: "4",
    label: "Assets",
    href: "/assets",
  },
  {
    id: "5",
    label: "Analytics",
    data: [
      {
        id: "5-1",
        label: "Model Effectiveness 5-1",
        href: "/analytics/model-effectiveness",
      },
      {
        id: "5-2",
        label: "Trend Analysis 5-2",
        href: "/analytics/trend-analysis",
      },
    ],
  },
];

import { useState } from "react";
import { theme } from "@hitachivantara/uikit-react-core";


export default function Demo() {
  const width = useWidth();


  const [selectedHeaderItem, setSelectedHeaderItem] =
    useState<HvHeaderNavigationItemProp>(navigationDataCombined[0]);
  const [selected, setSelected] = useState(
    navigationDataCombined[0].data?.[0].id,
  );


  const traverseItem = (
    item: HvHeaderNavigationItemProp,
  ): string | undefined => {
    if (item.data) {
      return traverseItem(item.data[0]);
    }
    return item.id;
  };


  const handleChange: HvHeaderNavigationProps["onClick"] = (event, item) => {
    setSelectedHeaderItem(item);
    setSelected(traverseItem(item));
  };


  const isLgUp = width === "lg" || width === "xl";


  return (
    <div className="w-full">
      <HvHeader position="relative">
        <HvHeaderNavigation
          data={navigationDataCombined}
          selected={selectedHeaderItem.id}
          onClick={handleChange}
          aria-label="Header Navigation"
          levels={1}
        />
      </HvHeader>
      <div
        style={{
          display: "flex",
          height: `calc(300px - ${theme.header.height})`,
        }}
      >
        <HvVerticalNavigation>
          <HvVerticalNavigationTree
            collapsible
            defaultExpanded
            selected={selected}
            aria-label="Vertical Navigation"
            onChange={(event, data) => {
              event.preventDefault();


              setSelected(data.id);
            }}
            data={selectedHeaderItem.data ?? [selectedHeaderItem]}
          />
        </HvVerticalNavigation>
      </div>
    </div>
  );
}


const navigationDataCombined = [
  {
    id: "1",
    label: "Overview",
    data: [
      {
        id: "1-1",
        label: "Model Effectiveness 1",
        href: "/overview/model-effectiveness",
      },
      {
        id: "1-2",
        label: "Trend Analysis 1-2",
        href: "/overview/trend-analysis",
      },
    ],
  },
  {
    id: "2",
    label: "Events",
    href: "/events",
  },
  {
    id: "3",
    label: "Work Orders",
    data: [
      {
        id: "3-1",
        label: "Model Effectiveness 3-1",
        data: [
          {
            id: "3-1-1",
            label: "Another Sub Level 3-1-1",
            href: "/work-orders/model-effectiveness-3-1-1",
          },
          {
            id: "3-1-2",
            label: "Another Sub Level 3-1-2",
            href: "/work-orders/trend-analysis-3-1-2",
          },
        ],
      },
      {
        id: "3-2",
        label: "Trend Analysis 3-2",
        href: "/work-orders/trend-analysis",
      },
    ],
  },
  {
    id: "4",
    label: "Assets",
    href: "/assets",
  },
  {
    id: "5",
    label: "Analytics",
    data: [
      {
        id: "5-1",
        label: "Model Effectiveness 5-1",
        href: "/analytics/model-effectiveness",
      },
      {
        id: "5-2",
        label: "Trend Analysis 5-2",
        href: "/analytics/trend-analysis",
      },
    ],
  },
];

import { useState } from "react";
import { theme } from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const width = useWidth();

  const [selectedHeaderItem, setSelectedHeaderItem] =
    useState<HvHeaderNavigationItemProp>(navigationDataCombined[0]);
  const [selected, setSelected] = useState(
    navigationDataCombined[0].data?.[0].id,
  );

  const traverseItem = (
    item: HvHeaderNavigationItemProp,
  ): string | undefined => {
    if (item.data) {
      return traverseItem(item.data[0]);
    }
    return item.id;
  };

  const handleChange: HvHeaderNavigationProps["onClick"] = (event, item) => {
    setSelectedHeaderItem(item);
    setSelected(traverseItem(item));
  };

  const isLgUp = width === "lg" || width === "xl";

  return (
    <div className="w-full">
      <HvHeader position="relative">
        <HvHeaderNavigation
          data={navigationDataCombined}
          selected={selectedHeaderItem.id}
          onClick={handleChange}
          aria-label="Header Navigation"
          levels={1}
        />
      </HvHeader>
      <div
        style={{
          display: "flex",
          height: `calc(300px - ${theme.header.height})`,
        }}
      >
        <HvVerticalNavigation>
          <HvVerticalNavigationTree
            collapsible
            defaultExpanded
            selected={selected}
            aria-label="Vertical Navigation"
            onChange={(event, data) => {
              event.preventDefault();

              setSelected(data.id);
            }}
            data={selectedHeaderItem.data ?? [selectedHeaderItem]}
          />
        </HvVerticalNavigation>
      </div>
    </div>
  );
}

const navigationDataCombined = [
  {
    id: "1",
    label: "Overview",
    data: [
      {
        id: "1-1",
        label: "Model Effectiveness 1",
        href: "/overview/model-effectiveness",
      },
      {
        id: "1-2",
        label: "Trend Analysis 1-2",
        href: "/overview/trend-analysis",
      },
    ],
  },
  {
    id: "2",
    label: "Events",
    href: "/events",
  },
  {
    id: "3",
    label: "Work Orders",
    data: [
      {
        id: "3-1",
        label: "Model Effectiveness 3-1",
        data: [
          {
            id: "3-1-1",
            label: "Another Sub Level 3-1-1",
            href: "/work-orders/model-effectiveness-3-1-1",
          },
          {
            id: "3-1-2",
            label: "Another Sub Level 3-1-2",
            href: "/work-orders/trend-analysis-3-1-2",
          },
        ],
      },
      {
        id: "3-2",
        label: "Trend Analysis 3-2",
        href: "/work-orders/trend-analysis",
      },
    ],
  },
  {
    id: "4",
    label: "Assets",
    href: "/assets",
  },
  {
    id: "5",
    label: "Analytics",
    data: [
      {
        id: "5-1",
        label: "Model Effectiveness 5-1",
        href: "/analytics/model-effectiveness",
      },
      {
        id: "5-2",
        label: "Trend Analysis 5-2",
        href: "/analytics/trend-analysis",
      },
    ],
  },
];

Custom content

You don’t need to use the provided components to build your header. You can use any component you want.

My App Title

<HvHeader position="relative" className="mb-lg w-full">
  <HvIconButton title="Menu">
    <Menu />
  </HvIconButton>
  <div className="flex-1" />
  <HvTypography variant="title3">My App Title</HvTypography>
  <div className="flex-1" />
  <HvButton variant="primarySubtle">Open</HvButton>
</HvHeader>

<HvHeader position="relative" className="mb-lg w-full">
  <HvIconButton title="Menu">
    <Menu />
  </HvIconButton>
  <div className="flex-1" />
  <HvTypography variant="title3">My App Title</HvTypography>
  <div className="flex-1" />
  <HvButton variant="primarySubtle">Open</HvButton>
</HvHeader>

Grid Input

Header

Usage

Navigation

Combined navigation

Custom content