Child navigation elements. You'll want to compose children from navigation header, navigation content or nestable navigation content, and navigation footer.

Whether nav is rendered on the server.

Whether to enable SSR placeholder replacement.

Describes the specific role of this navigation component for people viewing the page with assistive technology. This differentiates the navigation from other navigation components on a page.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Primary content for the item.

Custom component to render as an item. This can be both a functional component or a class component. Will return null if no component is defined. NOTE: Make sure the reference for this component does not change between renders else undefined behavior may happen.

Description of the item. This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.

Element to render before the item text. Generally should be an icon component.

Event that is triggered when the element is clicked.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Primary content for the item. Primary content for the item.

Custom component to render as an item. This can be both a functional component or a class component. Will return null if no component is defined. NOTE: Make sure the reference for this component does not change between renders else undefined behavior may happen.

Description of the item. This will render smaller text below the primary text of the item as well as slightly increasing the height of the item. Description of the item. This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.

Element to render before the item text. Generally should be an icon component. Element to render before the item text. Generally should be an icon component.

Event that is triggered when the element is clicked.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests. A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

@private

@private @deprecated

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Forces the top scroll indicator to be shown.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

The NestableNavigationContent wraps the entire navigation hierarchy of a side navigation. Using this component is only needed if you want to enable nested views with nesting items, otherwise you should use navigation content instead.

Array of the initial stack you want to show. This is useful when you want to set the initial nested view but don't want to opt into a controlled state. Make sure to have all intermediate navigation pages line up.

This property is enabled by default (set to true) and is designed to manage keyboard focus for the "go back" button or the last active parent within the <NestingItem/> component. It is applicable only when using our <NestingItem/> component.

Allows you to react based on transitions between nesting items. It will be called everytime a person navigates from one nesting item to another, both up or down the navigation hierarchy. This prop should be used with the stack prop for controlled behavior.

Called when a nesting ID that does not exist among <NestingItem>s is pushed to the stack. Use this callback to be notified when there is an undefined nesting state. Provides you with the stack which led to the undefined state, with the top of the stack (last item in array) being the invalid item.

Custom overrides for the composed components.

Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-2682 for more information.

This forces the top scroll indicator to be shown. Use this prop when you need to distinctly separate the side navigation header from the side navigation content.

Enables you to control the stack of navigation views you want to show. Do not jump between controlled and uncontrolled else undefined behaviour will occur. This means either using initialStack OR stack but not both. Make sure your stack array has a stable reference and does not change between renders.

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests. Will set these elements when defined:

• This wrapper - {testId}
• The back item (displayed when inside a nested view) - {testId}--go-back-item

The children of the section. These should generally be item or heading components.

This will render a border at the top of the section.

Adds <ul> and <li> tags around the items for better semantic markup in a list of items.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

The text passed to heading. If you don't provide a title, then the heading won't be rendered.