Navigation System
The latest navigation system for Atlassian apps.
Atlassian’s navigation is made of these basic parts:
- The layout defines clear areas for navigation elements
- Side navigation menus create a consistent feel for actions and links
- Top navigation elements provide familiar spots for common features
Installation
Note: the package will be renamed to @atlaskit/navigation-system in the next release, and will be
made public and published to npm. The existing @atlassian/navigation-system package will still be
available in Atlassian's internal registry, but will be deprecated. There will be no support for the
private package going forwards - you should migrate to the new @atlaskit/navigation-system
package.
yarn add @atlaskit/navigation-system
Usage
Detailed docs and example usage can be found here.
Positioning controls beside a local panel
For global controls outside the layout, the primary Root can opt into
UNSAFE_dangerouslyHoistSlotSizes. Its PanelLayout then publishes its rendered border-box width
on the document element, using localPanelWidthVar from
@atlaskit/navigation-system/layout/panel-layout:
import type { localPanelWidthVar } from '@atlaskit/navigation-system/layout/panel-layout';
// A type-checked literal keeps static styles compatible with Compiled.
style={{ right: `calc(var(${'--n_localPanelWidth' satisfies typeof localPanelWidthVar}, 0px) + 24px)` }}
The value follows both inline and overlay widths, including CSS constraints before the deferred
resize coordinator activates. It is removed when the panel surface unmounts; use the 0px fallback
when closed or before hydration. Only one primary Root should enable global size hoisting. This
variable is for positioning external controls, not for sizing the panel or persisting a preferred
width. The legacy Panel's --rightPanelWidth contract is unchanged.