By default the navigation item is oriented horizontally.

A navigation item hugs its content by default, but you can customize it and adjust its container to fit any preferred width.

To change the orientation of the navigation item, you can use the vertical orientation prop.

Use an icon to effectively signify the navigation item’s purpose, whether it’s related to a product’s identity, a specific tool, function, or a configuration setting.

Ensure that you use icon descriptors consistently across all items within the same hierarchy level. This helps keep them equally weighted.

You can add a badge to a navigation item to serve as a visual cue. A badge can inform users of additional context, notifications, signpost new content or indicate a status.

Only place a badge in a navigation item that does not include nested items, i.e., it will not have a chevron.

You can use a navigation item as a parent which nests other navigation items inside it. Parent navigation items are displayed with a chevron on the right-hand side. To set a navigation item as a parent, use the parent prop.

Use horizontal navigation items within a horizontal group to establish a consistent and easily accessible pathway for users, while conserving valuable screen estate. This will allow users to easily scan and identify navigation options in a seamless user experience.

Use a horizontal group of navigation items when you have fewer than eight items, otherwise consider a vertical group of items.

A vertical navigation group provides a simple, single-level list of links that users can select within an application or website.

Use vertical navigation when handling a hierarchical structure of nested pages. This configuration allows users to reveal nested items when selecting a parent item, making it easy to explore the content hierarchy.

If a navigation item has nested items within it, it will act as a trigger to show and hide the nested items. A parent item cannot act as a link and navigate to an overview page. If you require an overview page, use the first nested item to achieve this.

When the user collapses a vertical nested group, and there is an active nested item within it, the parent item should be configured with blurActive={true}. The indicator will stay on the parent item in the blur-active state. This tells the user that the active item is within this nested structure.

Using the render prop, you can customize the element rendered by the NavigationItem. Props defined on the JSX element will be merged with props from the NavigationItem.

A NavigationItem will either act as a link, or an expandable group for other NavigationItem elements. When a parent group is clicked, the group will expand or collapse. When a link is clicked, navigates the user to the specified href.

The default element for parent groups is <button>, whilst a link will use <a>.

will be created in the DOM as an <a> with merged props

Using the render prop, you can customize the element rendered by the NavigationItem.

The render prop can also accept a function. This approach allows more control over how props are merged, allowing for more precise customization of the component's behavior.

When a function is passed to the render prop, it's your responsibility to merge props within the function itself.