Children of the menu group. This should generally be Section components.

Used this to tell assistive technologies that the menu group is loading.

Use this to constrain the menu group's height to a specific value. This must be set if you want to have scrollable sections.

Use this to constrain the menu group's maximum width to a specific value.

Provide an accessible label via aria-label for the menu element for assistive technology.

Use this to constrain the menu group's minimum height to a specific value.

Use this to constrain the menu group's minimum width to a specific value.

Handler called when clicking on this element, or any children elements. Useful when needing to stop propagation of child events.

Use this to override the accessibility role for the element.

Configure the density of the menu group content.

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.

Children of the section. This should generally be Item or Heading components, but can also be EmptyStates if you want to render errors.

Use this to render a border at the top of the section.

Unique identifier for the element.

If your menu contains a list, use this to add <ul> and <li> tags around the items. This is essential for offering better, accessible semantic markup in a list of items.

Enables scrolling within the section. This won't work unless maxHeight is set on the parent MenuGroup component.

When true, section header inline padding is reduced. This API exists to support functionality in @atlaskit/side-navigation and should not be used. Once the new navigation is fully rolled out, this prop will be removed.

Provide an accessible label for the section via aria-label for assistive technology.

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 into the internal HeadingItem. If a title isn't provided, the HeadingItem won't be rendered, and this component will act as a regular Section.

ID referenced by the menu group wrapper's aria-labelledby attribute. This ID should be assigned to the group title element. Usage of either this, or the label attribute is strongly recommended.

The text of the heading.

Specifies the heading level in the document structure. If not specified, the default is h2.

A unique identifier that can be referenced in the labelledby prop of a section to allow assistive technology to announce the name of groups.

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.

This prop must not be used and will be deleted soon. Style overrides are not supported. If you need a custom list item, do not use @atlaskit/menu.

Description of the item. This will render smaller text below the primary text of the item, and slightly increase the height of the item.

Element to render after the item text. Usually this is an icon component.

Element to render before the item text. Usually this is an icon component.

Unique identifier for the element.

An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see React UFO integration into Design System components.

Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.

Makes the element appear selected.

When true, the title of the item will render as a h2 rather than a span This API exists to support functionality in @atlaskit/side-navigation and should not be used. Once the new navigation is fully rolled out, this prop will be removed.

Event that's triggered when the element is clicked.

Event that's triggered when the element has been pressed.

Use this to override the accessibility role for the element.

When true, the description of the item will wrap multiple lines if it's long enough.

When true, the title of the item will wrap multiple lines if it's long enough.

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.

This prop must not be used and will be deleted soon. Style overrides are not supported. If you need a custom list item, do not use @atlaskit/menu.

Description of the item. This will render smaller text below the primary text of the item, and slightly increase the height of the item.

Link to another page.

Element to render after the item text. Usually this is an icon component.

Element to render before the item text. Usually this is an icon component.

An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see React UFO integration into Design System components.

Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.

Makes the element appear selected.

When true, the title of the item will render as a h2 rather than a span This API exists to support functionality in @atlaskit/side-navigation and should not be used. Once the new navigation is fully rolled out, this prop will be removed.

Event that's triggered when the element is clicked.

Event that's triggered when the element has been pressed.

The relationship of the linked URL as space-separated link types. Generally you'll want to set this to "noopener noreferrer" when target is "_blank".

Use this to override the accessibility role for the element.

When true, the description of the item will wrap multiple lines if it's long enough.

When true, the title of the item will wrap multiple lines if it's long enough.

Where to display the linked URL, see anchor information on mdn for more information.

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.

Use this to prevent disable of drag functionality on the menu item. Marked as "unsafe" as this may break existing instances of drag handling.

Use this to opt out of using a router link and instead use a regular anchor element. Marked as "unsafe" because ideally, router links should be used for all internal links.

Primary content for the item.

This prop must not be used and will be deleted soon. Style overrides are not supported. If you need a custom list item, do not use @atlaskit/menu.

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.

Props passed to CustomItem will be passed down to this component. If the props for component have TypeScript types, CustomItem will extend them, providing type safety for your custom item.

E.g. <CustomItem to="/link" component={RouterLink} />.

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, and slightly increase the height of the item.

Element to render after the item text. Usually this is an icon component.

Element to render before the item text. Usually this is an icon component.

An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see React UFO integration into Design System components.

Makes the element appear disabled as well as removing interactivity. Avoid disabling menu items wherever possible as this isn’t accessible or usable.

Makes the element appear selected.

When true, the title of the item will render as a h2 rather than a span This API exists to support functionality in @atlaskit/side-navigation and should not be used. Once the new navigation is fully rolled out, this prop will be removed.

Event that's triggered when the element is clicked.

Event that's triggered when the element has been pressed.

When true, the description of the item will wrap multiple lines if it's long enough.

When true, the title of the item will wrap multiple lines if it's long enough.

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.

Use this to prevent disable of drag functionality on the menu item. Marked as "unsafe" as this may break existing instances of drag handling.

Causes to the skeleton to have a slight horizontal shimmer. Only use this when you want to bring more attention to the loading content.

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.

Width of the skeleton heading item. You usually don't need to specify this, as it has a staggered width based on :nth-child by default.

Bounded style overrides.

Renders a skeleton circle in the iconBefore location. Takes priority over hasIcon.

Renders a skeleton square in the iconBefore location.

Causes to the skeleton to have a slight horizontal shimmer. Only use this when you want to bring more attention to the loading content.

When true, the size/spacing of the skeleton size/spacing is adjusted to match the side navigation menu item. This API exists to support functionality in @atlaskit/side-navigation and should not be used. Once the new navigation is fully rolled out, this prop will be removed.

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.

Width of the skeleton item. You usually don't need to specify this, as it has a staggered width based on :nth-child by default.

Bounded style overrides.

Children of the menu group. This should generally be Section components.

Used this to tell assistive technologies that the menu group is loading.

Use this to constrain the menu group's height to a specific value. This must be set if you want to have scrollable sections.

Use this to constrain the menu group's maximum width to a specific value.

Provide an accessible label via aria-label for the menu element for assistive technology.

Use this to constrain the menu group's minimum height to a specific value.

Use this to constrain the menu group's minimum width to a specific value.

Handler called when clicking on this element, or any children elements. Useful when needing to stop propagation of child events.

Use this to override the accessibility role for the element.

Configure the density of the menu group content.

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.