NavMenu | Abyss

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

Overview

The NavMenu component is a navigation menu that can contain links and dropdowns. It is designed to be accessible and customizable, allowing for a variety of use cases. Please follow the examples below for proper implementation of all the available NavMenu subcomponents.

NavMenu.Root

The NavMenu.Root is the provider component that contains all NavMenu subcomponents and accepts the following props:

hasOverlay is used to show or hide the overlay when a dropdown menu is opened. The default value is false.
zIndex provides the ability to set the z-index value of the navigation menu. If hasOverlay is utilized, it will also adjust the z-index of the overlay and can assist with managing placement when multiple navigation menus are used on a single page. The default value is 101.
enableOutsideScroll is used to allow the user to scroll, even when a navigation dropdown item is open. The default value is false.
sticky provides the ability to position the navigation menu at the top of the viewport.
mobileDrawer is used to render the navigation menu in a drawer instead of a dropdown on mobile screen sizes. The default value is true.

Position viewport to trigger

Add the optional positionViewportToTrigger prop to NavMenu.Root in order to position the dropdown menu viewport with the corresponding trigger element. positionViewportToTrigger also takes in an optional minWidth property to set the minimum width of the viewport. The default min-width is 350px.

If not utilized, the default behavior will occur and the dropdown menu will span a majority of the width of the navigation menu bar.

NavMenu.List

The NavMenu.List component is a wrapper for the top level menu items and should contain NavMenu.Link or NavMenu.Item as direct children.

NavMenu.Link

The NavMenu.Link component is used to create a link or button in the top-level navigation menu and is a direct child of NavMenu.List. To use as a link, provide a valid value to the href prop. To use as a button, utilize the onClick prop instead.

Selected

Use the selected prop to signal that a given item refers to the current path the user is on. This can be used on a NavMenu.Link or a NavMenu.Trigger.

Use the following components to add a dropdown menu to the top level navigation menu.

NavMenu.Item

The NavMenu.Item component is the parent component for creating a dropdown menu item. As direct children, it should contain a trigger with content combination through usage of NavMenu.Trigger and NavMenu.Content. It is a direct child of NavMenu.List.

NavMenu.Divider

The NavMenu.Divider is a simple divider line component that allows you to add a visual separator between different NavMenu.Item components.

NavMenu.Trigger

The NavMenu.Trigger component is a button element that toggles viewing of the dropdown menu content.

Use the following components to construct the content for the dropdown menu.

NavMenu.Content

The NavMenu.Content component is used to wrap the dropdown menu content and should be a direct child of NavMenu.Item. Please see the following subcomponents below for constructing your dropdown menu content.

NavMenu.Columns

This component should be the outermost component of what is passed into content. It is used to provide styling for the dropdown container and the columns that go inside it.

NavMenu.Column

This component should be a child of NavMenu.Columns. Each column that is a child of NavMenu.Columns will be a distinct column in the dropdown menu.

The children of this component will be displayed vertically; you can use NavMenu.MenuItem as children to auto-format and style your input, or pass in your own custom renders to be displayed within the column.

Available NavMenu.Column props:

title: Displays a bolded header as an <h2> at top of the column.
href: Converts a column header into a link.
onClick: Converts a column header into a button. It takes in a function that will be called when clicked.

NavMenu.MenuItem

This component should be a child of NavMenu.Column. Use this component to automatically style links/buttons in your dropdown that only have a title, description, and link/button action.

Available NavMenu.MenuItem props:

title: The title of the item.
description: The description of the item.
href: Converts the item into a link (on external links, an icon will appear next to the title to signify that it will open in a new window).
onClick: Converts the item into a button. It takes in a function that will be called when clicked.

NOTE: Each NavMenu.MenuItem should have an href or onClick, but not both.

NavMenu.MenuItemUnstyled

The NavMenu.MenuItemUnstyled component is an unstyled wrapper that ensures proper menu closing behavior when using custom interactive elements.

Use this component when you need to include your own custom-styled buttons or links in the navigation menu while maintaining the automatic menu closure on click that the standard MenuItem provides.

StateRouter

The StateRouter component is used to manage the routing within the dropdown menu. It allows for nested routes and provides a way to navigate between different sets of dropdown menu content.