V1SubNavigationMenu

import { V1SubNavigationMenu } from '@uhg-abyss/web/ui/SubNavigationMenu';

Usage

Utilize V1SubNavigationMenu to create a navigation menu on the side of your web page.

Scroll

When the Menu has overflow it will begin to scroll.

Title

Use the title prop to pass in a title for the Menu.

SubText

Use the subText prop to pass in a description for the Menu.

HeadingLevel

Use the headingLevel prop to pass in a specified headingLevel for the title. The default is h3.

When using V1SubNavigationMenu

In <main> content (such as a "left nav"):

`it is likely appropriate for titleTag to be a page heading
Set titleTag to "h2" to "h6" to correctly nest in the heading hierarchy (to create <h2> to <h6>)

As part of a larger navigation element (such as NavMenu):

it is appropriate for titleTag to be an element that correctly nests in the parent
Set titleTag to "div" to create <div> or other appropriate child element

Width

Use the width prop to set the width of the menu. Defaults to 320px.

Height

Use the height prop to set the height of the menu. Defaults to 100%.

NavItems

Use the navItems prop to specify what is displayed in the V1SubNavigationMenu. The prop requires an array of objects that have the form:

navItems: [
  {
    title: 'string',
    href: 'string',
    isDisabled: 'boolean',
    before: 'node',
    after: 'node',
    onClick: 'func',
    openNewWindow: 'boolean',
    subItems: 'object[]',
    isOpenByDefault: 'boolean',
    removeCollapse: 'boolean',
  },
];

navItems can have either an href or a subset of NavItems in subItems.
navItems also takes openNewWindow, which will open a new window when the link is clicked. If a non-relative path (like https://google.com) is passed, then openNewWindow will be true by default; otherwise, it will be false by default.
If subItems is specified, then the object will be recognized as a dropdown. You can utilize isOpenByDefault to specify if the dropdown starts out open or closed (isOpenByDefault is set to false by default).
removeCollapse can be set to true to display all menu sub-items without the collapse functionality. By Default, it is set to false and collapse functionality is enabled.
before and after can be used to place icons or nodes before or after the menu item.

Set active

V1SubNavigationMenu will inherently determine if the current location path matches a nav-item path and apply the default active state styles.

If you'd like to override this default behavior and manually handle setting of the active state, you can use the setActive prop. setActive is a function that's called as part of a loop through all nav-menu items on render and provides a single argument with each nav-menu item. Return true to the item you'd like the default active state styling to be applied. Custom styling can be accomplished by targeting the abyss-sub-navigation-menu-link-active class.

Multi level dropdowns

V1SubNavigationMenu supports up to three levels of dropdown items. To supply an additional level, pass in an array of sub-item objects to the subItems property on the sub-item dropdown you'd like it to be applied.

Controlled expansion state

Use the expandedItems, and onToggleExpansion props to control open/closed state of dropdowns externally. Both of these props must be provided to enable controlled expansion.

Note:: isOpenByDefault is no longer applicable when using controlled expansion.

{
  const [expandedItems, setExpandedItems] = React.useState({
    '0': false,
    '0-0': false,
  });
  const toggleExpansion = (path: string, nextOpen: boolean) => {
    setExpandedItems((prev) => ({
      ...prev,
      [path]: nextOpen,
    }));
  };
  //...

  return (
    <V1SubNavigationMenu
      expandedItems={expandedItems}
      onToggleExpansion={toggleExpansion}
      //...
    />
  );
}

Default selection example

Closing nested dropdowns when closing parent

Programmatic control example

Clickable header title

To render the V1SubNavigationMenu header title as a link, pass in an href to the titleHref prop. To render as a button, pass in a callback function to titleOnClick.

titleHref

titleOnClick

Pass in the prop variant and set the value to sideBarMenu in order to turn your V1SubNavigationMenu into a side bar menu that lists out all available links.

Position

Set the position prop to left when aligning the sideBarMenu variant to the right side of the screen. This will move the active indicator to the left side and update the menu alignment. position is set to right by default