Layout

For rendering the layout areas, e.g. TopNav, SideNav, Main. They should be rendered as immediate children.

Whether the side nav should be collapsed by default on desktop screens.

It is always collapsed by default for mobile screens.

This value is used when the side nav is first mounted, but you should continuously update your persisted state using the onCollapse and onExpand callbacks, to ensure it is up to date when the app is reloaded.

Note: When provided, the defaultCollapsed props on SideNav and SideNavToggleButton will be ignored.

Controls whether the side nav toggle shortcut is enabled. This will be used to bind the keyboard event listener, and to display the keyboard shortcuts in the appropriate tooltips (SideNavToggleButton, SideNavPanelSplitter).

The shortcut key is Ctrl + [.

The shortcut is not enabled by default.

The shortcut will also be ignored if there are any open ADS modal dialogs (@atlaskit/modal-dialog).

SideNav has another prop canToggleWithShortcut() that can be used to run additional checks after the shortcut is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your your own custom checks, e.g. if there is a legacy dialog open.

The built-in keyboard shortcut is available whenever this prop is enabled.

The header text for the skip links container element.

The label for the skip links button that opens the skip links popup.

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

Note: This prop is only supported for legacy purposes in Jira and Confluence, and is subject to be removed without notice in the future.

Whether to dangerously hoist the layout slot sizes to the document root element, to support some legacy use cases. Do not use this prop for new code.

Bounded style overrides.

The content of the layout area. Should include a Banner component from @atlaskit/banner.

The height of the layout area.

Defaults to 48px.

The id attribute of the slot. Used to connect the layout slot's skip link to the layout element. If not provided, a unique ID will be generated.

The label for this slot's skip link. Defaults to the slot's label value.

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

Bounded style overrides.

The content of the layout area. Should include TopNavStart, TopNavMiddle, and TopNavEnd.

Custom theme for the top navigation. This is a port of Nav 3 functionality, and not recommended for new usage, as it does not align with our future vision.

Not intended for long term use. This is added to support the migration to the new page layout. We may replace this prop in a future release.

The id attribute of the slot. Used to connect the layout slot's skip link to the layout element. If not provided, a unique ID will be generated.

The label for this slot's skip link. Defaults to the slot's label value.

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

Bounded style overrides.

The content of the layout area.

Should contain SideNavToggleButton, AppSwitcher, and AppLogo/CustomLogo components.

Slot for the side nav toggle button.

You should only render <SideNavToggleButton> inside this slot, not as a child.

Consumers that do not need a toggle button can explicitly pass null.

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

The content of the layout area.

The first child should be the search bar. If it is not, you might see unexpected layout behavior.

Should also contain the Create button.

The content of the layout area.

Should contain top nav end item components like Notifications, Help, LogIn etc.

Provide an accessible label, often used by screen readers.

Actions at the inline end, after the other actions or their overflow button, that stay in the top nav at every viewport size outside the overflow popup. Separated from the other actions by 8px; spacing within those actions remains 4px. Items stay mounted when the viewport changes. Consumers must ensure that this content fits on small screens. Supply complete accessible groups (lists containing list items), and hide each group at its outermost element so hidden or absent actions do not leave empty lists or spacing behind. Enabled behind platform-dst-chat-panel-layout.

The label for the show more button.

Whether the side nav should be toggled in response to the built-in keyboard shortcut. Use this callback to conditionally disable the shortcut based on your own custom checks, e.g. if there is a legacy dialog open.

This prop will do nothing if isSideNavShortcutEnabled on Root is not set to true, as the keyboard event listener is only binded if isSideNavShortcutEnabled is true.

The shortcut key is Ctrl + [.

The content of the layout area. Should include side nav layout areas as required: SideNavHeader, SideNavBody, SideNavFooter. Within these, you can use side nav menu items.

This prop is being replaced by defaultSideNavCollapsed on the Root element, and will be removed in the future.

Whether the side nav should be collapsed by default on desktop screens.

It is always collapsed by default for mobile screens.

This value is used when the side nav is first mounted, but you should continuously update your persisted state using the onCollapse and onExpand callbacks, to ensure it is up to date when the app is reloaded.

Note: If using this prop, ensure that it is also provided to the SideNavToggleButton. This is to ensure the state is in sync before post-SSR hydration.

The default width of the side nav layout area.

It should be an integer greater than or equal to the minimum width.

It is only used when the side nav is first mounted, but you should continuously update your persisted state using the onResizeEnd callback of PanelSplitter, to ensure it is up to date when the app is reloaded.

The id attribute of the slot. Used to connect the layout slot's skip link to the layout element. If not provided, a unique ID will be generated.

The accessible name of the slot, announced by screen readers.

Optional maximum width for both inline and overlay resizing.

Minimum width used when fitting the side nav inline.

Called when the side nav is collapsed.

Called when the side nav is expanded.

Called when the side nav stops peeking / flyout.

Called when the side nav begins peeking / flyout.

The label for this slot's skip link. Defaults to the slot's label value.

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

The content of the layout area.

The content of the layout area. Should contain side nav menu 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 unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

The content of the layout area.

Bounded style overrides.

The content of the layout area. This is where you should put the main content of your page.

The id attribute of the slot. Used to connect the layout slot's skip link to the layout element. If not provided, a unique ID will be generated.

Minimum width used by the layout allocation system.

The label for this slot's skip link. Defaults to the slot's label value.

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

Bounded style overrides.

The content of the layout area.

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

Bounded style overrides.

Main content. Mount PanelLayout inside navigation's Main, alongside ChatPanel in Root.

Default at compact viewport sizes. Defaults to 320, or an explicitly supplied defaultPanelWidth. Used only until a controlled width or user resize supplies a preference.

Initial preferred width in pixels; subsequent changes are ignored. Defaults to 365, or 400 with chat layout enabled. After a user resize, one preferred width is retained across inline and overlay modes. Available space can constrain the rendered width without overwriting that preference.

Called after user resizing, with the effective width. Accept this value to control panelWidth.

One callback per completed pointer/keyboard resize, for persistence and analytics.

Caller-owned panel content; no Panel System provider or renderer is required.

Optional content identity, used to reset scrolling and animate content replacement.

Accessible region and splitter labels; pass localized values in products.

Optional maximum width in pixels.

Minimum width in pixels. Defaults to 320; overlays can be smaller in a narrower container.

Controlled preferred width in pixels. Allocation may constrain it without changing the request.

The content of the layout area.

Identifies the content currently displayed in the panel. Changing this value animates the previous content out before animating the next content in. When omitted, content updates immediately.

The default width of the layout area.

It should be an integer between the resize bounds - the minimum is 120px and the maximum is 50% of the viewport width.

This value is also used as the minimum resizing width, except when the defaultWidth is greater then 400px, in which case 400px will be used as the minimum resizing width instead.

Whether or not the slot has its own border. On small screens this becomes a shadow.

Defaults to true. Will be removed in the future (and disabling the border will not be supported).

The id attribute of the slot. Used to connect the layout slot's skip link to the layout element. If not provided, a unique ID will be generated.

The accessible name of the slot, announced by screen readers.

Opt-in override for the maximum width the panel can be resized to, applied to both the rendered width and the resize bounds (mouse and keyboard).

When omitted, the panel defaults to half the viewport width (after removing the sidebar width), which keeps it from growing larger than the page content. Provide a vw or px value (e.g. '70vw') to allow a wider panel.

This is currently used by Jira's Issue Navigator native issue preview panel; other consumers should leave it unset to keep the default cap.

The label for this slot's skip link. Defaults to the slot's label value.

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

Bounded style overrides.

The accessible label for the panel splitter. It is visually hidden, but is required for accessibility.

Called when the user finishes resizing the panel.

Called when the user begins resizing the panel. Intended for analytics.

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

Displays a tooltip with the provided content.

The tooltipContent will not be announced by screen readers because it pertains to the draggable element, which lacks keyboard functionality. Use the label prop to provide accessible information about the panel splitter.

The label when the toggle button will collapse the side nav.

This prop is being replaced by defaultSideNavCollapsed on the Root element, and will be removed in the future.

Whether the side nav should be collapsed by default on desktop screens.

It is always collapsed by default for mobile screens.

Note: If using this prop, ensure that it is also provided to the SideNav slot. This is to ensure the state is in sync before post-SSR hydration.

The label when the toggle button will expand the side nav.

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.

The callback function that is called when the toggle button is clicked.

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