GlobalActions

Global Actions are actions that affect the entire page they live in. They should persist while scrolling down the screen.

It uses variant="global" by default, rendering an h1 element and applying sticky positioning. Use variant="section" to group related content blocks. Use it sparingly, as it introduces strong visual separation, which may not always be necessary.

Source Code

uikit-react-core

Custom content

The content of the Global Actions can be customized. This is useful when you want to add different elements other than the title and actions.

<HvGlobalActions
  backButton={
    <HvIconButton title="Go back">
      <Backwards />
    </HvIconButton>
  }
  title={
    <>
      <Home title="Home" />
      <HvBreadCrumb
        listRoute={[
          { label: "Label 1", path: "#route1" },
          { label: "Label 2", path: "#route2" },
          { label: "Label 3", path: "#route3" },
          { label: "Label 4", path: "#route4" },
          { label: "Label 5", path: "#route5" },
        ]}
        maxVisible={2}
      />
    </>
  }
>
  <HvButton variant="secondaryGhost">Action</HvButton>
  <HvDropDownMenu
    placement="left"
    dataList={[
      { label: "Action 2" },
      { label: "Action 3" },
      { label: "Action 4" },
    ]}
  />
</HvGlobalActions>

<HvGlobalActions
  backButton={
    <HvIconButton title="Go back">
      <Backwards />
    </HvIconButton>
  }
  title={
    <>
      <Home title="Home" />
      <HvBreadCrumb
        listRoute={[
          { label: "Label 1", path: "#route1" },
          { label: "Label 2", path: "#route2" },
          { label: "Label 3", path: "#route3" },
          { label: "Label 4", path: "#route4" },
          { label: "Label 5", path: "#route5" },
        ]}
        maxVisible={2}
      />
    </>
  }
>
  <HvButton variant="secondaryGhost">Action</HvButton>
  <HvDropDownMenu
    placement="left"
    dataList={[
      { label: "Action 2" },
      { label: "Action 3" },
      { label: "Action 4" },
    ]}
  />
</HvGlobalActions>