StepNavigation

Navigation page with steps.

You need to define the steps displayed on the component so that itself can be drawn on the UI. On each step, you need to define a state - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' - and a title to be shown as a tooltip or a text above of the step. You can also defined className, separatorClassName, and titleClassName to override the default styles.

If the step component has titles, each one will have 215px of width by default.

Source Code

uikit-react-lab

This is a lab component and as such is not considered stable and may be subject to breaking changes in future releases. You need to import it from @hitachivantara/uikit-react-lab.

CompletedFailedPending

type

stepSize

showTitles

<HvStepNavigation 
  type="Default"
  stepSize="sm"
  showTitles
  steps={[{"title":"Completed","state":"Completed"},{"title":"Failed","state":"Failed"},{"title":"Pending","state":"Pending"}]}
/>

<HvStepNavigation 
  type="Default"
  stepSize="sm"
  showTitles
  steps={[{"title":"Completed","state":"Completed"},{"title":"Failed","state":"Failed"},{"title":"Pending","state":"Pending"}]}
/>

Width

You can use the width prop to pass an array of custom breakpoints for the step navigation.

<HvStepNavigation
  steps={[
    {
      title: "Completed",
      state: "Completed",
      onClick: () => {
        alert("You clicked on 'Completed' step");
      },
    },
    {
      title: "Failed",
      state: "Failed",
      onClick: () => {
        alert("You clicked on 'Failed' step");
      },
    },
    {
      title: "Pending",
      state: "Pending",
      onClick: () => {
        alert("You clicked on 'Pending' step");
      },
    },
    {
      title: "Current",
      state: "Current",
      onClick: () => {
        alert("You clicked on 'Current' step");
      },
    },
    {
      title: "Enabled",
      state: "Enabled",
      onClick: () => {
        alert("You clicked on 'Enabled' step");
      },
    },
    {
      title: "Disabled",
      state: "Disabled",
      onClick: () => {
        alert("You clicked on 'Disabled' step");
      },
    },
  ]}
  width={{
    xs: 200,
    sm: 400,
    md: 600,
    lg: 800,
    xl: 1000,
  }}
/>

<HvStepNavigation
  steps={[
    {
      title: "Completed",
      state: "Completed",
      onClick: () => {
        alert("You clicked on 'Completed' step");
      },
    },
    {
      title: "Failed",
      state: "Failed",
      onClick: () => {
        alert("You clicked on 'Failed' step");
      },
    },
    {
      title: "Pending",
      state: "Pending",
      onClick: () => {
        alert("You clicked on 'Pending' step");
      },
    },
    {
      title: "Current",
      state: "Current",
      onClick: () => {
        alert("You clicked on 'Current' step");
      },
    },
    {
      title: "Enabled",
      state: "Enabled",
      onClick: () => {
        alert("You clicked on 'Enabled' step");
      },
    },
    {
      title: "Disabled",
      state: "Disabled",
      onClick: () => {
        alert("You clicked on 'Disabled' step");
      },
    },
  ]}
  width={{
    xs: 200,
    sm: 400,
    md: 600,
    lg: 800,
    xl: 1000,
  }}
/>

Custom styles

<div className="w-full grid place-content-center">
  <HvStepNavigation
    type="Simple"
    steps={[
      { title: "Import data" },
      { title: "Transform data" },
      { title: "Validate data" },
      { title: "Export data" },
    ].map((s) => ({
      ...s,
      className: "bg-positive",
      separatorClassName: "bg-positive h-3px",
    }))}
  />
</div>

<div className="w-full grid place-content-center">
  <HvStepNavigation
    type="Simple"
    steps={[
      { title: "Import data" },
      { title: "Transform data" },
      { title: "Validate data" },
      { title: "Export data" },
    ].map((s) => ({
      ...s,
      className: "bg-positive",
      separatorClassName: "bg-positive h-3px",
    }))}
  />
</div>

Stack Switch