VerticalNavigation

Use a vertical layout for global navigation on wide screens. treeview mode provides structured hierarchy but overrides standard keyboard navigation.

Source Code

uikit-react-core

Note

Use mode=“disclosure” for most apps. Avoid mode=“treeview” unless complex hierarchy and custom keyboard interaction are required.

Usage

The example below demonstrates a typical use of the VerticalNavigation component, combining VerticalNavigationTree to render the navigation structure and VerticalNavigationActions to display bottom-aligned actions.

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("00");


  return (
    <HvVerticalNavigation>
      <HvVerticalNavigationTree
        aria-label="Example 1 navigation"
        selected={value}
        onChange={(event, data) => {
          if (data.id === "02-01-01") {
            event.preventDefault();
            event.stopPropagation();
          }
          setValue(data.id);
        }}
        data={navigationData}
      />
      <HvVerticalNavigationActions>
        <HvVerticalNavigationAction label="Profile" icon={<User />} />
        <HvVerticalNavigationAction label="Logout" icon={<LogOut />} />
      </HvVerticalNavigationActions>
    </HvVerticalNavigation>
  );
}


const navigationData = [
  { id: "00", label: "Overview" },
  { id: "01", label: "Analytics" },
  {
    id: "02",
    label: "Storage",
    data: [
      {
        id: "02-01",
        label: "Cloud",
        data: [
          {
            id: "02-01-01",
            label: "Servers",
            href: "https://www.hitachivantara.com/en-us/news.html",
          },
          {
            id: "02-01-02",
            label: "HCP Anywhere",
          },
          {
            id: "02-01-03",
            label: "This Computer",
            disabled: true,
          },
        ],
      },
    ],
  },
  {
    id: "03",
    label: "Administration",
    href: "#admin",
    data: [
      {
        id: "03-01",
        label: "Rest API",
        href: "#admin-rest",
        data: [
          {
            id: "03-01-01",
            label: "Log Bundle",
            href: "#admin-rest-logs",
          },
        ],
      },
    ],
  },
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("00");

  return (
    <HvVerticalNavigation>
      <HvVerticalNavigationTree
        aria-label="Example 1 navigation"
        selected={value}
        onChange={(event, data) => {
          if (data.id === "02-01-01") {
            event.preventDefault();
            event.stopPropagation();
          }
          setValue(data.id);
        }}
        data={navigationData}
      />
      <HvVerticalNavigationActions>
        <HvVerticalNavigationAction label="Profile" icon={<User />} />
        <HvVerticalNavigationAction label="Logout" icon={<LogOut />} />
      </HvVerticalNavigationActions>
    </HvVerticalNavigation>
  );
}

const navigationData = [
  { id: "00", label: "Overview" },
  { id: "01", label: "Analytics" },
  {
    id: "02",
    label: "Storage",
    data: [
      {
        id: "02-01",
        label: "Cloud",
        data: [
          {
            id: "02-01-01",
            label: "Servers",
            href: "https://www.hitachivantara.com/en-us/news.html",
          },
          {
            id: "02-01-02",
            label: "HCP Anywhere",
          },
          {
            id: "02-01-03",
            label: "This Computer",
            disabled: true,
          },
        ],
      },
    ],
  },
  {
    id: "03",
    label: "Administration",
    href: "#admin",
    data: [
      {
        id: "03-01",
        label: "Rest API",
        href: "#admin-rest",
        data: [
          {
            id: "03-01-01",
            label: "Log Bundle",
            href: "#admin-rest-logs",
          },
        ],
      },
    ],
  },
];

Tree view

Use mode="treeview" to enable keyboard navigation with arrow keys. Press Enter to expand/collapse or select items. Set collapsible to true to allow collapsing non-leaf nodes.

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("01-01");


  return (
    <HvVerticalNavigation>
      <HvVerticalNavigationTree
        mode="treeview"
        collpasible
        defaultExpanded
        aria-label="Example 3 navigation"
        selected={value}
        onChange={(event, data) => setValue(data.id)}
        data={navigationData}
      />
      <HvVerticalNavigationActions>
        <HvVerticalNavigationAction label="Profile" icon={<User />} />
        <HvVerticalNavigationAction label="Logout" icon={<LogOut />} />
      </HvVerticalNavigationActions>
    </HvVerticalNavigation>
  );
}


const navigationData = [
  { id: "00", label: "Installation Overview" },
  {
    id: "01",
    label: "Hardware",
    data: [
      {
        id: "01-01",
        label: "Ambient Monitoring",
      },
      {
        id: "01-02",
        label: "Server Status Summary",
      },
    ],
  },
  {
    id: "02",
    label: "System",
    data: [
      {
        id: "02-01",
        label: "Buckets",
      },
      {
        id: "02-02",
        label: "Admin Users",
      },
      {
        id: "02-03",
        label: "Log Bundle",
        data: [
          {
            id: "02-03-01",
            label: "Rest API",
          },
          {
            id: "02-03-02",
            label: "License",
          },
        ],
      },
    ],
  },
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("01-01");

  return (
    <HvVerticalNavigation>
      <HvVerticalNavigationTree
        mode="treeview"
        collpasible
        defaultExpanded
        aria-label="Example 3 navigation"
        selected={value}
        onChange={(event, data) => setValue(data.id)}
        data={navigationData}
      />
      <HvVerticalNavigationActions>
        <HvVerticalNavigationAction label="Profile" icon={<User />} />
        <HvVerticalNavigationAction label="Logout" icon={<LogOut />} />
      </HvVerticalNavigationActions>
    </HvVerticalNavigation>
  );
}

const navigationData = [
  { id: "00", label: "Installation Overview" },
  {
    id: "01",
    label: "Hardware",
    data: [
      {
        id: "01-01",
        label: "Ambient Monitoring",
      },
      {
        id: "01-02",
        label: "Server Status Summary",
      },
    ],
  },
  {
    id: "02",
    label: "System",
    data: [
      {
        id: "02-01",
        label: "Buckets",
      },
      {
        id: "02-02",
        label: "Admin Users",
      },
      {
        id: "02-03",
        label: "Log Bundle",
        data: [
          {
            id: "02-03-01",
            label: "Rest API",
          },
          {
            id: "02-03-02",
            label: "License",
          },
        ],
      },
    ],
  },
];

Collapsible

To make the navigation collapsible, use HvVerticalNavigationHeader with a collapse button. Control the open state via the open prop and show the button by passing a handler to onCollapseButtonClick.

Enable useIcons to display icons when collapsed—defaults to the first letter of the label if no icon is provided.

Show Icons

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("01-01");
  const [show, setShow] = useState(false);
  const [icons, setIcons] = useState(false);


  const handleIsExpanded = () => {
    setShow(!show);
  };


  return (
    <div className="flex gap-xs" style={{ height: 400 }}>
      <HvCheckBox
        label="Show Icons"
        checked={icons}
        onChange={() => setIcons(!icons)}
      />
      <HvVerticalNavigation open={show} useIcons={icons}>
        <HvVerticalNavigationHeader
          title="Menu"
          onCollapseButtonClick={handleIsExpanded}
          collapseButtonProps={{
            "aria-label": "collapseButton",
            "aria-expanded": show,
          }}
        />
        <HvVerticalNavigationTree
          collapsible
          defaultExpanded
          aria-label="Example 3 navigation"
          selected={value}
          onChange={(event, data) => setValue(data.id)}
          data={navigationData}
        />
      </HvVerticalNavigation>
    </div>
  );
}


const navigationData = [
  { id: "00", label: "Installation Overview", icon: <Open /> },
  {
    id: "01",
    label: "Hardware",
    icon: <BarChart />,
    data: [
      { id: "01-01", label: "Ambient Monitoring", icon: <BarChart /> },
      { id: "01-02", label: "Server Status Summary" },
    ],
  },
  {
    id: "02",
    label: "System",
    icon: <Deploy />,
    data: [
      { id: "02-01", label: "Buckets", icon: <Deploy /> },
      { id: "02-02", label: "Admin Users" },
      {
        id: "02-03",
        label: "Log Bundle",
        data: [
          { id: "02-03-01", label: "Rest API" },
          { id: "02-03-02", label: "License" },
        ],
      },
    ],
  },
  {
    id: "03",
    label: "System 2",
    data: [
      { id: "03-01", label: "Buckets" },
      { id: "03-02", label: "Admin Users" },
      {
        id: "03-03",
        label: "Log Bundle",
        data: [
          { id: "03-03-01", label: "Rest API" },
          { id: "03-03-02", label: "License" },
        ],
      },
    ],
  },
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("01-01");
  const [show, setShow] = useState(false);
  const [icons, setIcons] = useState(false);

  const handleIsExpanded = () => {
    setShow(!show);
  };

  return (
    <div className="flex gap-xs" style={{ height: 400 }}>
      <HvCheckBox
        label="Show Icons"
        checked={icons}
        onChange={() => setIcons(!icons)}
      />
      <HvVerticalNavigation open={show} useIcons={icons}>
        <HvVerticalNavigationHeader
          title="Menu"
          onCollapseButtonClick={handleIsExpanded}
          collapseButtonProps={{
            "aria-label": "collapseButton",
            "aria-expanded": show,
          }}
        />
        <HvVerticalNavigationTree
          collapsible
          defaultExpanded
          aria-label="Example 3 navigation"
          selected={value}
          onChange={(event, data) => setValue(data.id)}
          data={navigationData}
        />
      </HvVerticalNavigation>
    </div>
  );
}

const navigationData = [
  { id: "00", label: "Installation Overview", icon: <Open /> },
  {
    id: "01",
    label: "Hardware",
    icon: <BarChart />,
    data: [
      { id: "01-01", label: "Ambient Monitoring", icon: <BarChart /> },
      { id: "01-02", label: "Server Status Summary" },
    ],
  },
  {
    id: "02",
    label: "System",
    icon: <Deploy />,
    data: [
      { id: "02-01", label: "Buckets", icon: <Deploy /> },
      { id: "02-02", label: "Admin Users" },
      {
        id: "02-03",
        label: "Log Bundle",
        data: [
          { id: "02-03-01", label: "Rest API" },
          { id: "02-03-02", label: "License" },
        ],
      },
    ],
  },
  {
    id: "03",
    label: "System 2",
    data: [
      { id: "03-01", label: "Buckets" },
      { id: "03-02", label: "Admin Users" },
      {
        id: "03-03",
        label: "Log Bundle",
        data: [
          { id: "03-03-01", label: "Rest API" },
          { id: "03-03-02", label: "License" },
        ],
      },
    ],
  },
];

Slider

If you set the slider prop to true, the navigation will be displayed as a slider instead of a tree. When the user selects an item that contains children, the content of the navigation will be replaced with the children of the selected item.

You can use this functionality to display the navigation in regular tree view mode and switch to slider mode when the screen size is lower that a certain threshold.

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState("menu1-3");


  return (
    <HvVerticalNavigation open slider>
      <HvVerticalNavigationHeader title="Menu" />
      <HvVerticalNavigationTree
        collapsible
        defaultExpanded
        aria-label="Example 4 Slider Mode"
        selected={value}
        onChange={(event, data) => setValue(data.id)}
        data={navigationData}
      />
    </HvVerticalNavigation>
  );
}


const navigationData = [
  {
    id: "menu1",
    label: "Menu 1",
    path: "",
    icon: <Open />,
    data: [
      {
        id: "menu1-1",
        label: "Menu 1-1",
        path: "",
        icon: <Open />,
        parent: null,
      },
      {
        id: "menu1-2",
        label: "Menu 1-2",
        path: "",
        icon: <BarChart />,
        data: [
          {
            id: "menu1-2-1",
            label: "Menu 1-2-1",
            path: "",
            icon: <Open />,
            parent: null,
          },
          {
            id: "menu1-2-2",
            label: "Menu 1-2-2",
            path: "",
            icon: <BarChart />,
            parent: null,
          },
          {
            id: "menu1-2-3",
            label: "Menu 1-2-3",
            path: "",
            icon: <Deploy />,
            parent: null,
          },
        ],
        parent: null,
      },
      {
        id: "menu1-3",
        label: "Menu 1-3",
        path: "",
        icon: <Deploy />,
        parent: null,
      },
    ],
    parent: null,
  },
  {
    id: "menu2",
    label: "Menu 2 with a very big name that should be truncated",
    path: "",
    icon: <BarChart />,
    parent: null,
  },
  {
    id: "menu3",
    label: "Menu 3",
    path: "",
    icon: <Deploy />,
    parent: null,
  },
];

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState("menu1-3");

  return (
    <HvVerticalNavigation open slider>
      <HvVerticalNavigationHeader title="Menu" />
      <HvVerticalNavigationTree
        collapsible
        defaultExpanded
        aria-label="Example 4 Slider Mode"
        selected={value}
        onChange={(event, data) => setValue(data.id)}
        data={navigationData}
      />
    </HvVerticalNavigation>
  );
}

const navigationData = [
  {
    id: "menu1",
    label: "Menu 1",
    path: "",
    icon: <Open />,
    data: [
      {
        id: "menu1-1",
        label: "Menu 1-1",
        path: "",
        icon: <Open />,
        parent: null,
      },
      {
        id: "menu1-2",
        label: "Menu 1-2",
        path: "",
        icon: <BarChart />,
        data: [
          {
            id: "menu1-2-1",
            label: "Menu 1-2-1",
            path: "",
            icon: <Open />,
            parent: null,
          },
          {
            id: "menu1-2-2",
            label: "Menu 1-2-2",
            path: "",
            icon: <BarChart />,
            parent: null,
          },
          {
            id: "menu1-2-3",
            label: "Menu 1-2-3",
            path: "",
            icon: <Deploy />,
            parent: null,
          },
        ],
        parent: null,
      },
      {
        id: "menu1-3",
        label: "Menu 1-3",
        path: "",
        icon: <Deploy />,
        parent: null,
      },
    ],
    parent: null,
  },
  {
    id: "menu2",
    label: "Menu 2 with a very big name that should be truncated",
    path: "",
    icon: <BarChart />,
    parent: null,
  },
  {
    id: "menu3",
    label: "Menu 3",
    path: "",
    icon: <Deploy />,
    parent: null,
  },
];

Custom content

Custom App

import { useState } from "react";


export default function Demo() {
  const [collapsed, setCollapsed] = useState(false);


  return (
    <HvVerticalNavigation open={!collapsed} useIcons>
      <div
        className="flex flex-col gap-md"
        style={{ alignItems: collapsed ? "center" : "stretch" }}
      >
        {collapsed ? (
          <Favorite />
        ) : (
          <div className="flex items-center">
            <Favorite />
            <HvTypography variant="label">Custom App</HvTypography>
          </div>
        )}
        <CollapsibleButton
          collapsed={collapsed}
          variant="primary"
          icon={<Add />}
          label="Create"
        />
      </div>
      <HvVerticalNavigationTree data={data} />
      <HvVerticalNavigationActions>
        <div className="relative">
          {!collapsed && (
            <Backwards className="absolute pointer-events-none top-0 right-0" />
          )}
          <HvVerticalNavigationAction
            label={collapsed ? "Expand menu" : "Collapse menu"}
            icon={collapsed ? <Forwards /> : undefined}
            onClick={() => setCollapsed((prev) => !prev)}
          />
        </div>
      </HvVerticalNavigationActions>
    </HvVerticalNavigation>
  );
}


const CollapsibleButton = ({
  collapsed,
  label,
  icon,
  ...others
}: CollapsibleButtonProps) => {
  const props = collapsed
    ? { "aria-label": String(label), children: icon, icon: true }
    : { startIcon: icon, children: label };


  return <HvButton {...props} {...others} />;
};


const data = [
  { id: "00", label: "Jobs", icon: <Job /> },
  { id: "01", label: "Charts", icon: <BarChart /> },
  { id: "02", label: "Deployment", icon: <Deploy /> },
  { id: "03", label: "Cloud", icon: <Cloud /> },
];

import { useState } from "react";

export default function Demo() {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <HvVerticalNavigation open={!collapsed} useIcons>
      <div
        className="flex flex-col gap-md"
        style={{ alignItems: collapsed ? "center" : "stretch" }}
      >
        {collapsed ? (
          <Favorite />
        ) : (
          <div className="flex items-center">
            <Favorite />
            <HvTypography variant="label">Custom App</HvTypography>
          </div>
        )}
        <CollapsibleButton
          collapsed={collapsed}
          variant="primary"
          icon={<Add />}
          label="Create"
        />
      </div>
      <HvVerticalNavigationTree data={data} />
      <HvVerticalNavigationActions>
        <div className="relative">
          {!collapsed && (
            <Backwards className="absolute pointer-events-none top-0 right-0" />
          )}
          <HvVerticalNavigationAction
            label={collapsed ? "Expand menu" : "Collapse menu"}
            icon={collapsed ? <Forwards /> : undefined}
            onClick={() => setCollapsed((prev) => !prev)}
          />
        </div>
      </HvVerticalNavigationActions>
    </HvVerticalNavigation>
  );
}

const CollapsibleButton = ({
  collapsed,
  label,
  icon,
  ...others
}: CollapsibleButtonProps) => {
  const props = collapsed
    ? { "aria-label": String(label), children: icon, icon: true }
    : { startIcon: icon, children: label };

  return <HvButton {...props} {...others} />;
};

const data = [
  { id: "00", label: "Jobs", icon: <Job /> },
  { id: "01", label: "Charts", icon: <BarChart /> },
  { id: "02", label: "Deployment", icon: <Deploy /> },
  { id: "03", label: "Cloud", icon: <Cloud /> },
];