Top nav items

Identifies the popup element that the trigger controls. Should match the id of the popup content for screen readers to understand the relationship.

Announces to assistive technology whether the popup is currently open or closed.

Informs assistive technology that this element triggers a popup. With platform-dst-top-layer, it is not set when the popup has no role.

Allows a custom visual to be used instead of the Atlassian AppSwitcher icon. Defaults to the Atlassian app switcher icon.

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.

Indicates that the button is selected.

Provide an accessible label, often used by screen readers.

Handler called on click.

Called when the mouse enters the element container. Allows preloading popup components

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 URL to navigate to when the element is clicked.

The icon to render.

Provide an accessible label, often used by screen readers. This label should include the name of the app, and if applicable, the location the user will navigate to on click.

The name of the app. Will be displayed next to the logo in wider viewports.

Handler called on click.

Provide a secondaryName for the app. Will be displayed below the name in wider viewports.

The URL to navigate to when the element is clicked.

The icon component to render. It will be used for small viewports.

Provide an accessible label, often used by screen readers.

The logo component to render. It will be used for large viewports.

Handler called on click.

The component to render after the search input.

The icon component to render before the search input.

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.

Provide an accessible label, often used by screen readers.

Handler called on click.

The content of the button.

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.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

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 unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

Text content to be rendered in the button.

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.

Indicates that the button is selected.

Handler called on click.

Identifies the popup element that the trigger controls. Should match the id of the popup content for screen readers to understand the relationship.

Announces to assistive technology whether the popup is currently open or closed.

Informs assistive technology that this element triggers a popup. With platform-dst-top-layer, it is not set when the popup has no role.

The component to render as the badge. You are recommended to use the Badge component from @atlaskit/badge.

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.

Can be used to disable the default listitem role.

This is intended for when the item is a popup trigger, and requires you to render your own <MenuListItem> to wrap the action.

@example

<TopNavEnd>
		<MenuListItem>
			<DropdownMenu
				shouldRenderToParent
				trigger={({ triggerRef, ...props }) => (
					<Profile {...props} ref={triggerRef} label="Profile" isListItem={false}  />
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Account</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</MenuListItem>
</TopNavEnd>

Indicates that the button is selected.

Provide an accessible label, often used by screen readers.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

Called when the mouse enters the element container. Allows preloading popup components

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}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

The component to render as the badge. You are recommended to use the Badge component from @atlaskit/badge.

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.

Can be used to disable the default listitem role.

This is intended for when the item is a popup trigger, and requires you to render your own <MenuListItem> to wrap the action.

@example

<TopNavEnd>
		<MenuListItem>
			<DropdownMenu
				shouldRenderToParent
				trigger={({ triggerRef, ...props }) => (
					<Profile {...props} ref={triggerRef} label="Profile" isListItem={false}  />
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Account</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</MenuListItem>
</TopNavEnd>

Indicates that the button is selected.

Provide an accessible label, often used by screen readers.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

Called when the mouse enters the element container. Allows preloading popup components

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}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

Identifies the popup element that the trigger controls. Should match the id of the popup content for screen readers to understand the relationship.

Announces to assistive technology whether the popup is currently open or closed.

Informs assistive technology that this element triggers a popup. With platform-dst-top-layer, it is not set when the popup has no role.

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.

Can be used to disable the default listitem role.

This is intended for when the item is a popup trigger, and requires you to render your own <MenuListItem> to wrap the action.

@example

<TopNavEnd>
		<MenuListItem>
			<DropdownMenu
				shouldRenderToParent
				trigger={({ triggerRef, ...props }) => (
					<Profile {...props} ref={triggerRef} label="Profile" isListItem={false}  />
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Account</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</MenuListItem>
</TopNavEnd>

Indicates that the button is selected.

Provide an accessible label, often used by screen readers.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

Called when the mouse enters the element container. Allows preloading popup components

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}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

Identifies the popup element that the trigger controls. Should match the id of the popup content for screen readers to understand the relationship.

Announces to assistive technology whether the popup is currently open or closed.

Informs assistive technology that this element triggers a popup. With platform-dst-top-layer, it is not set when the popup has no role.

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.

Can be used to disable the default listitem role.

This is intended for when the item is a popup trigger, and requires you to render your own <MenuListItem> to wrap the action.

@example

<TopNavEnd>
		<MenuListItem>
			<DropdownMenu
				shouldRenderToParent
				trigger={({ triggerRef, ...props }) => (
					<Profile {...props} ref={triggerRef} label="Profile" isListItem={false}  />
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Account</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</MenuListItem>
</TopNavEnd>

Indicates that the button is selected.

Provide an accessible label, often used by screen readers.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

Called when the mouse enters the element container. Allows preloading popup components

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}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

The URL of the image to display in the avatar.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

Standard links can be provided as a string, which should be mapped to the underlying router link component.

Alternatively, you can provide an object for advanced link configurations by supplying the expected object type to the generic.

@example

const MyRouterLink = forwardRef(
(
  {
    href,
    children,
    ...rest
  }: RouterLinkComponentProps<{
    href: string;
    replace: boolean;
  }>,
  ref: Ref<HTMLAnchorElement>,
) => { ...

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.

Provide an accessible label, often used by screen readers.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

Called when the mouse enters the element container. Allows preloading popup components

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 unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

Identifies the popup element that the trigger controls. Should match the id of the popup content for screen readers to understand the relationship.

Announces to assistive technology whether the popup is currently open or closed.

Informs assistive technology that this element triggers a popup. With platform-dst-top-layer, it is not set when the popup has no role.

Places an icon within the button.

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.

Can be used to disable the default listitem role.

This is intended for when the item is a popup trigger, and requires you to render your own <MenuListItem> to wrap the action.

@example

<TopNavEnd>
		<MenuListItem>
			<DropdownMenu
				shouldRenderToParent
				trigger={({ triggerRef, ...props }) => (
					<Profile {...props} ref={triggerRef} label="Profile" isListItem={false}  />
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Account</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</MenuListItem>
</TopNavEnd>

Indicates that the button is selected.

Provide an accessible label, often used by screen readers.

Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the pressable or anchor primitive code examples for information on firing Atlaskit analytics events or routing these to GASv3 analytics.

Called when the mouse enters the element container. Allows preloading popup components

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}

Display a keyboard shortcut in the tooltip.

Keys will be displayed as individual keyboard key segments after the tooltip content.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.