Navigation system

The latest navigation system for Atlassian apps.

Neutral selected states

When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.

ExamplesCodeMigration guideChangelog

11.6.0

Minor Changes

  • 8cded96236762, (opens new window) - Add ResponsiveTopNavButton and make placeholder Create icon-only below 48rem of TopNav container width, behind platform-dst-chat-panel-layout.

Patch Changes

  • Updated dependencies

11.5.0

Minor Changes

Patch Changes

  • Updated dependencies

11.4.3

Patch Changes

  • e3025d3052440, (opens new window) - PanelSplitter: behind platform-dst-panel-splitter-resize-direction, the tooltip side and the keyboard arrow keys follow the panel's resize direction, which comes from position and the text direction. For position="start" in left-to-right languages, the tooltip shows on the left and ArrowLeft increases the width.

11.4.2

Patch Changes

  • Updated dependencies

11.4.1

Patch Changes

  • 55ae4d70ab929, (opens new window) - Replace panel splitter attribute discovery with direct element registration, preserving deferred sizing and resize interactions for navigation and local panels.
  • Updated dependencies

11.4.0

Minor Changes

  • 87ab1d5ada9d4, (opens new window) - Move local-panel layout responsibilities from @atlassian/panel-system into @atlaskit/navigation-system, including responsive positioning, sizing and resizing alongside Main, SideNav and ChatPanel.

    Expose localPanelWidthVar for positioning external controls beside the rendered local panel in inline and overlay modes when Root enables UNSAFE_dangerouslyHoistSlotSizes.

Patch Changes

  • Updated dependencies

11.3.4

Patch Changes

  • 0cc2e73141eea, (opens new window) - Behind the platform-dst-top-layer feature gate, no longer uses @atlaskit/layering. Open overlays are found with the @atlaskit/top-layer/page-surface entry points instead (platform-dst-top-layer-tooltip for tooltip). Behaviour with the gate off is unchanged.
  • Updated dependencies

11.3.3

Patch Changes

  • 7ddc892892fda, (opens new window) - Gate panel content-switch motion behind platform-dst-motion-uplift-panel-content independently of panel open/close motion, and retain the navigation panel motion boundary when its content key is cleared.
  • Updated dependencies

11.3.2

Patch Changes

  • bd8355ce4adc8, (opens new window) - Refine chat and local panel resizing with directional cascading and responsive overlay behaviour. Lazy-load resize logic while preserving the initial layout during hydration.

11.3.1

Patch Changes

  • Updated dependencies

11.3.0

Minor Changes

  • 682d5c04a6f3b, (opens new window) - Disable Full Height Sidebar (FHS) as part of the FHS rollback.

    @atlaskit/navigation-system:

    • useIsFhsEnabled now always returns false, and IsFhsEnabledProvider is a passthrough that ignores its value prop. Both are deprecated (along with IsCustomIsFhsEnabledContext) and will be removed in a future release once all consumers have removed them.
    • Removed the internal FHS-only code paths: full height side nav layering, side nav panel splitter portalling into the top nav, hiding the panel splitter when popups are open, FHS top nav / banner / logo / search styles, and the FHS-only side nav expand/collapse animations.
    • Removed the navx-full-height-sidebar feature gate.
    • Search (top nav) now uses the motion.button.* tokens for its hover and pressed transitions, matching the other top nav buttons.

    @atlassian/global-side-navigation: removed the navx-full-height-sidebar feature gate registration.

    @atlassian/search-page: removed the FHS-only open layer observer integration from Quick Find, and the now-unused @atlaskit/layering dependency.

Patch Changes

  • Updated dependencies

11.2.3

Patch Changes

  • 21c13edb525f8, (opens new window) - Inline the ChatPanel width custom-property name and overlay z-index as checked literals so its styles can be statically extracted by Atlaspack. No runtime change.

11.2.2

Patch Changes

  • 13952a4f4a1a0, (opens new window) - Cleanup feature_gate platform-dst-motion-uplift-button. The motion uplift for buttons and other interactive surfaces (button, lozenge dropdown trigger, inline edit read view, page layout resize control grab area, and top nav themed anchors/pressables) is now always on.
  • Updated dependencies

11.2.1

Patch Changes

11.2.0

Minor Changes

  • b536adef43f98, (opens new window) - Add a self-hiding Chat action with focus restoration and persistent TopNavEnd items behind platform-dst-chat-panel-layout.

    Persistent groups retain popup-layer protection and hide their complete accessible group when inactive.

    Persistent actions render last, after the other top-nav actions or their overflow button.

11.1.3

Patch Changes

11.1.2

Patch Changes

11.1.1

Patch Changes

11.1.0

Minor Changes

Patch Changes

  • Updated dependencies

11.0.0

Major Changes

  • ae5c32fe7bfd6, (opens new window) - Record the rollback of the DSP-25935 popup trigger type expansion in PR #487935. This restores compatibility with existing consumers, including Jira Assets audit logs and linked objects.

    Popup's aria-haspopup trigger contract returns to boolean | 'dialog'. The affected public trigger props in Dropdown Menu, Avatar, Lozenge, Universal Create, Rovo Pins, and Navigation System also return to their earlier contracts. Consumers using the newly added role-specific string values must return to values supported by those earlier contracts. Popup no longer exports AriaHasPopup or TriggerAriaProps; use TriggerProps['aria-haspopup'] and Pick<TriggerProps, 'aria-controls' | 'aria-expanded' | 'aria-haspopup'> instead.

    Popup and Dropdown Menu retain their existing top-layer runtime ARIA values through the prior compatibility adapters. Conversation Assistant returns to its previous internal trigger type annotation without changing its public API.

Patch Changes

  • Updated dependencies

10.17.9

Patch Changes

  • 1ea8784eeb880, (opens new window) - Use Popup's TriggerAriaProps for optional trigger ARIA attributes in Conversation Assistant and Navigation System. Conversation Assistant can now forward Popup's role-specific aria-haspopup values.
  • Updated dependencies

10.17.8

Patch Changes

  • Updated dependencies

10.17.7

Patch Changes

10.17.6

Patch Changes

  • Updated dependencies

10.17.5

Patch Changes

  • 1715d48a722a2, (opens new window) - Migrate responsive styling to typed canonical CSS media-query keys. Allow those keys in the UI Styling Standard and report non-canonical queries used with satisfies.
  • Updated dependencies

10.17.4

Patch Changes

10.17.3

Patch Changes

  • 14307d3138fd3, (opens new window) - Refactor styles to use statically analyzable values and type-checked inline constants for Compiled and Atlaspack incremental builds, preserving existing styling behavior.
  • Updated dependencies

10.17.2

Patch Changes

  • 5017f4bf49edf, (opens new window) - [ux] Adjusted main content to snap when 60% of the entry or exit animation of the panel and side nav have completed. Changes are behind the platform-dst-motion-uplift-panel and platform-dst-motion-uplift-sidenav feature gates.

10.17.1

Patch Changes

  • Updated dependencies

10.17.0

Minor Changes

  • c7333edc6dfa2, (opens new window) - Add content change motion to Panel behind the platform-dst-motion-uplift-panel feature flag. Consumers can provide a contentKey to exit the previous content before entering the next while preserving the panel shell.

Patch Changes

  • Updated dependencies

10.16.11

Patch Changes

  • Updated dependencies

10.16.10

Patch Changes

  • e890c4bb5e772, (opens new window) - Updated panel splitter interaction colors to use semantic border tokens behind the platform-dst-tokens-finesse feature gate.
  • Updated dependencies

10.16.9

Patch Changes

  • Updated dependencies

10.16.8

Patch Changes

  • 73b74955b8418, (opens new window) - Added color.border.input.search for search input borders. Navigation System Search uses the new token when platform-dst-tokens-finesse is enabled; the existing border is unchanged when the gate is disabled.
  • Updated dependencies

10.16.7

Patch Changes

  • Updated dependencies

10.16.6

Patch Changes

10.16.5

Patch Changes

  • Updated dependencies

10.16.4

Patch Changes

  • 1cfdd8f6d54e6, (opens new window) - Behind platform-dst-motion-uplift-sidenav, the side nav now holds grid-area: main for the first 150ms of its desktop enter animation instead of switching immediately, so the main content reflows shortly into the animation rather than at the very start.

    Behind platform-dst-motion-uplift-panel, the panel holds position: fixed for the first 150ms of its enter animation, and its enter and exit animations are now disabled under prefers-reduced-motion: reduce.

10.16.3

Patch Changes

  • 24a22ba9f2d72, (opens new window) - [ux] Panel on open snaps main content when animation ends. On close the main content snaps on animation start. Changes are behind the platform-dst-motion-uplift-panel feature gate.
  • Updated dependencies

10.16.2

Patch Changes

  • Use @atlassian/testing-library exclusively in unit tests.
  • Updated dependencies

10.16.1

Patch Changes

  • 547e06541deb3, (opens new window) - Added specific print styles to the Main component which resets the height to auto. This ensures when printing a page that the content can extend beyond the viewport height.

10.16.0

Minor Changes

  • d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

    These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

    No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

Patch Changes

  • Updated dependencies

10.15.0

Minor Changes

Patch Changes

  • Updated dependencies

10.14.1

Patch Changes

  • Updated dependencies

10.14.0

Minor Changes

  • 2309581c02076, (opens new window) - Decouple the built-in side nav shortcut, toggle tooltip shortcut, and side nav splitter tooltip from the full height sidebar rollout behind platform-dst-keep-desired-fhs-features.

10.13.0

Minor Changes

  • 0195cea826a48, (opens new window) - Use directional motion tokens for RTL-aware panel slide animations. Adds new motion.panel.content.enter and motion.panel.content.exit motion tokens, applied to the Panel to soften the content when opening and closing.

Patch Changes

  • Updated dependencies

10.12.1

Patch Changes

  • 8cd40349d33ee, (opens new window) - Fix Aside slot appearing below other content when the platform-dst-motion-uplift-panel feature gate is enabled. The root grid now uses overflow: clip instead of overflow: hidden to avoid creating a scroll container that breaks position: sticky on descendant elements.

10.12.0

Minor Changes

  • 5bca82622e866, (opens new window) - [ux] @atlaskit/navigation-system: the side nav expand, collapse and flyout animations now use the new Side Nav motion tokens (CSS keyframe animations) instead of transform transitions with @starting-style, behind the platform-dst-motion-uplift-sidenav feature gate. When the gate is off, the animations are unchanged.

10.11.1

Patch Changes

  • a4d2562b27fc6, (opens new window) - Cleanup feature gate platform_dst_nav4_side_nav_grid_area_fix. The side nav's mobile grid-area is now always scoped to @media not (min-width: 64rem), the exact inverse of its desktop rule, so the two can never both match at a given viewport and the side nav can no longer render in the wrong grid area when Compiled's atomic rule ordering is non-deterministic (local development / streaming SSR).
  • Updated dependencies

10.11.0

Minor Changes

  • 1960192b10121, (opens new window) - Cleanup feature gate platform-ads-nav-fixed-height. The Main component in navigation-system now always applies a fixed height at smaller viewports (the gate-on behaviour is now permanent).

Patch Changes

  • Updated dependencies

10.10.2

Patch Changes

  • Updated dependencies

10.10.1

Patch Changes

  • Updated dependencies

10.10.0

Minor Changes

Patch Changes

  • Updated dependencies

10.9.2

Patch Changes

  • Updated dependencies

10.9.1

Patch Changes

  • ae45184d2cd0b, (opens new window) - Fix Panel enter/exit animation so a panel with a default width of 0 starts hidden instead of flashing visible. The panel now uses useMotion's new initialState to begin in the hidden state (behind the platform-dst-motion-uplift-panel gate). The animationFillMode overrides on the entering/exiting styles have been removed, as this is now set within the motion tokens themselves.

    Additionally, a overflow: hidden rule is now applied to the page layout root (behind the same platform-dst-motion-uplift-panel gate) so that the panel transforming off screen no longer causes scroll bars to appear.

  • Updated dependencies

10.9.0

Minor Changes

  • 994b264c96af8, (opens new window) - AppLogo now accepts an optional secondaryName prop, which renders supporting text below the app name in wider viewports. This can be used to provide extra context for an app or experience while keeping the existing name, label, and small-screen behavior unchanged.

    import { ConfluenceIcon } from '@atlaskit/logo/confluence-icon'; import { AppLogo } from '@atlaskit/navigation-system/top-nav-items'; <AppLogo href="http://www.atlassian.design" icon={ConfluenceIcon} name="Confluence" secondaryName="Documentation" label="Home page" />;

Patch Changes

  • Updated dependencies

10.8.0

Minor Changes

  • 5dd6269af3c70, (opens new window) - Add an opt-in maxWidth to the Panel layout slot and preview panel Panel config, letting a single consumer request a wider resize bound (e.g. 70vw) than the default cap of half the viewport width. Defaults are unchanged, so all existing consumers remain capped at the default.

    @atlaskit/navigation-system — the Panel layout slot accepts a maxWidth (vw/px), applied to both the rendered width and the resize bounds (mouse and keyboard):

    import { Panel } from '@atlaskit/navigation-system/layout/panel'; <Panel defaultWidth={600} maxWidth="70vw"> {/* ...panel content... */} </Panel>;

    @atlassian/preview-panels-api — the opened panel config takes the same maxWidth:

    import { usePreviewPanelsActions } from '@atlassian/preview-panels-api'; const { open } = usePreviewPanelsActions(); open({ panel: { id: 'issue-123', type: 'issue', product: 'jira', content: () => <IssuePreview />, maxWidth: '70vw', }, });

    @atlassian/preview-panel-global-objects — useGlobalObjectPreviewPanels accepts a maxWidth option that it forwards onto the panel it opens, so global-object preview panels (Confluence page, goals, teams, CMDB object, etc.) share the same wider bound. Omitting it keeps the default cap:

    const previewPanels = useGlobalObjectPreviewPanels('jira', cloudId, { maxWidth: '70vw' });

10.7.1

Patch Changes

  • Updated dependencies

10.7.0

Minor Changes

  • 90aa712679ee0, (opens new window) - AppSwitcher now accepts a custom icon component via the icon prop, allowing image-backed visuals (such as a product logo) to be rendered in place of the default Atlassian app switcher icon. The icon prop is optional and defaults to the standard app switcher icon, so existing usage is unaffected.

    import { AppSwitcher } from '@atlaskit/navigation-system/top-nav-items'; import { UnitTile } from '@atlassian/unit-tile'; const CustomAppSwitcherIcon = () => ( <UnitTile unitName="Confluence" size="small" iconUrl={dstLogo} /> ); <AppSwitcher icon={CustomAppSwitcherIcon} label="App switcher" onClick={() => { /* open app switcher */ }} />;

Patch Changes

  • Updated dependencies

10.6.0

Minor Changes

  • 95ff9f0742fb9, (opens new window) - [ux] Added motion to Panel entry and exit behind the platform-dst-motion-uplift-panel feature gate.

    When the gate is enabled, Panel animates on entry automatically. To get the exit animation, consumers must render the conditionally-mounted Panel inside an ExitingPersistence boundary so the panel stays mounted until its exit motion finishes:

    import ExitingPersistence from '@atlaskit/motion/exiting-persistence'; import { Panel } from '@atlaskit/navigation-system/layout/panel'; function Example({ isPanelOpen }: { isPanelOpen: boolean }) { return ( <ExitingPersistence> {isPanelOpen && <Panel defaultWidth={320}>{/* panel content */}</Panel>} </ExitingPersistence> ); }

    Without the ExitingPersistence wrapper the panel is removed immediately on close and the exit animation is skipped. Entry animation works with or without the wrapper.

Patch Changes

  • Updated dependencies

10.5.7

Patch Changes

  • Updated dependencies

10.5.6

Patch Changes

  • Updated dependencies

10.5.5

Patch Changes

  • Updated dependencies

10.5.4

Patch Changes

10.5.3

Patch Changes

  • f2ec2ee8b495e, (opens new window) - Update @atlaskit/spotlight imports to use de-barrelled entry-points.
  • 5d91339612c3b, (opens new window) - Fix side nav rendering in the wrong grid area under streaming SSR, where Compiled could emit the mobile and desktop grid-area atomic rules out of order. The mobile rule is now scoped to @media not (min-width: 64rem) so it can never conflict with the desktop rule. Behind the platform_dst_nav4_side_nav_grid_area_fix feature gate.
  • Updated dependencies

10.5.2

Patch Changes

  • c84bd629439e0, (opens new window) - Opt IconRenderer out of React Compiler memoization ('use no memo'). This file is a copy of @atlaskit/button's IconRenderer, sharing the same isIconRenderProp() heuristic that misclassifies icon components missing a displayName as render-props and invokes them as plain functions instead of JSX. Under React Compiler, memoization of this render could skip re-invoking an already-compiled icon component on some renders, dropping a hook call and causing a hook-count mismatch (React error #300).
  • Updated dependencies

10.5.1

Patch Changes

  • Updated dependencies

10.5.0

Minor Changes

Patch Changes

  • Updated dependencies

10.4.0

Minor Changes

  • 5ad834eeed183, (opens new window) - Main component now has a fixed height on smaller viewports behind a feature gate. This is to enable in-app panels with correct scroll and overlay behaviour.

10.3.0

Minor Changes

  • a3b0e6c4eeab7, (opens new window) - Apply button motion tokens (motion.button.hovered / motion.button.pressed) to top-nav ThemedAnchor, gated behind platform-dst-motion-uplift-button, for parity with ThemedPressable. Also enables the gate by default in the top nav button constellation example so the motion is previewed in the docs.

10.2.0

Minor Changes

  • 015a98b324278, (opens new window) - Adopt motion.button.hovered / motion.button.pressed tokens for hover/press background transitions in custom button-like components (inline-edit read view, navigation-system top-nav pressable, and page-layout resize control grab area), gated behind the platform-dst-motion-uplift-button feature flag.

Patch Changes

  • Updated dependencies

10.1.0

Minor Changes

  • cd097a2111788, (opens new window) - Republish packages depending on @atlaskit/react-compiler-gating so their published dependency reference is updated to the renamed @atlaskit/react-compiler-gating scope.

    The earlier rename of @atlassian/react-compiler-gating to @atlaskit/react-compiler-gating only bumped the renamed package itself, so dependent packages were never republished and their published versions still referenced the old @atlassian/react-compiler-gating name, which is not available in the public npm registry. This minor bump republishes all affected packages with the corrected dependency.

Patch Changes

  • Updated dependencies

10.0.1

Patch Changes

10.0.0

Major Changes

  • f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

    Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

    Types are now exclusively via the "types": "dist/types/index.d.ts" property.

    - "typesVersions": { - ">=4.5 <4.9": { - "*": [ - "dist/types-ts4.5/*", - "dist/types-ts4.5/index.d.ts" - ] - } - },

Patch Changes

  • Updated dependencies

9.4.3

Patch Changes

  • f9eceea16e433, (opens new window) - Fix Root safety-rail selector hiding native top-layer elements (<dialog> and elements with the popover attribute) rendered as direct children of Root. These elements are now excluded from the display: none !important rule so the browser can promote them into the top layer when opened. Adds VR coverage for both cases.

9.4.2

Patch Changes

9.4.1

Patch Changes

  • Updated dependencies

9.4.0

Minor Changes

  • c9a83a4b370b5, (opens new window) - Focus will now move to the first item in the side nav after expanding via the toggle button or when navigating via the skip link. This change is behind the platform_dst_nav4_skip_link_a11y_1 feature gate.

9.3.1

Patch Changes

  • Updated dependencies

9.3.0

Minor Changes

9.2.1

Patch Changes

9.2.0

Minor Changes

  • b46825ac6c66c, (opens new window) - Cleans up the platform_dst_nav4_top_nav_increase_height feature gate. The top nav height is now always 56px when the full-height sidebar is enabled.

9.1.2

Patch Changes

  • Updated dependencies

9.1.1

Patch Changes

9.1.0

Minor Changes

Patch Changes

9.0.0

Major Changes

  • 2d4e2aa315dc1, (opens new window) - Renamed the experimental theming entrypoints from /experimental/* to /theming/*. The /experimental/ribbon entrypoint is unaffected.

    Migration:

    • @atlaskit/navigation-system/experimental/top-nav-button → @atlaskit/navigation-system/theming/top-nav-button
    • @atlaskit/navigation-system/experimental/use-has-custom-theme → @atlaskit/navigation-system/theming/use-has-custom-theme
    • @atlaskit/navigation-system/experimental/use-legacy-search-theme → @atlaskit/navigation-system/theming/use-legacy-search-theme
    • @atlaskit/navigation-system/experimental/color-utils/parse-hex → @atlaskit/navigation-system/theming/color-utils/parse-hex
    • @atlaskit/navigation-system/experimental/color-utils/parse-hsl → @atlaskit/navigation-system/theming/color-utils/parse-hsl
    • @atlaskit/navigation-system/experimental/color-utils/parse-rgb → @atlaskit/navigation-system/theming/color-utils/parse-rgb
    • @atlaskit/navigation-system/experimental/color-utils/parse-user-color → @atlaskit/navigation-system/theming/color-utils/parse-user-color

Patch Changes

  • Updated dependencies

8.2.0

Minor Changes

Patch Changes

  • Updated dependencies

8.1.0

Minor Changes

  • 6a19433e19f86, (opens new window) - Changes to skip links behind the platform_dst_nav4_skip_link_a11y_1 feature gate:
    • Visual improvements
    • Removes skip links for Banner, TopNav, Aside and Panel slots
    • Renames default skip link label for Main to 'Main content' (from 'Main Content')

Patch Changes

  • Updated dependencies

8.0.0

Major Changes

Patch Changes

  • Updated dependencies

7.3.0

Minor Changes

  • 1a76aa4057f18, (opens new window) - Cleans up the platform_dst_nav4_ribbon_slot feature gate. The 'ribbon' CSS grid area is now always present on the page layout. There should be no perceivable change unless the Ribbon slot is being rendered.

Patch Changes

  • Updated dependencies

7.2.1

Patch Changes

  • Updated dependencies

7.2.0

Minor Changes

  • 71834d94559e2, (opens new window) - Implements custom theming support when the full height sidebar is enabled. This change is behind the platform_dst_nav4_custom_theming_fhs_1 feature gate.

Patch Changes

  • Updated dependencies

7.1.7

Patch Changes

  • Updated dependencies

7.1.6

Patch Changes

7.1.5

Patch Changes

  • f54d8707590da, (opens new window) - The platform-dst-nav-app-icon-height-fix feature gate has been cleaned up. The app logo icon now always has a maximum height of 24px applied to prevent custom App Logos from extending beyond the edges of the container.

7.1.4

Patch Changes

7.1.3

Patch Changes

7.1.2

Patch Changes

7.1.1

Patch Changes

7.1.0

Minor Changes

Patch Changes

  • Updated dependencies

7.0.0

Major Changes

Patch Changes

  • Updated dependencies

6.4.0

Minor Changes

  • 12424cd3197be, (opens new window) - Cleans up the platform_dst_nav4_flyoutmenuitem_render_to_parent feature gate. Flyout menu item popups now always use shouldRenderToParent and are not rendered in a portal.

Patch Changes

  • Updated dependencies

6.3.2

Patch Changes

  • Updated dependencies

6.3.1

Patch Changes

  • Updated dependencies

6.3.0

Minor Changes

Patch Changes

  • Updated dependencies

6.2.1

Patch Changes

6.2.0

Minor Changes

  • 7719c436631e8, (opens new window) - The feature gate platform-dst-side-nav-layering-fixes has been cleaned up.
    • Layers inside the side nav that are rendered to parent (shouldRenderToParent) will be layered below the top nav and banner.
    • Refactors have been made to the positioning and render location of the side nav panel splitter.

Patch Changes

6.1.0

Minor Changes

  • 7ae800ebd066d, (opens new window) - Cleans up the platform_dst_nav4_side_nav_toggle_button_slot feature gate. The sideNavToggleButton prop on TopNavStart is now required, but can be explicitly set to null.

6.0.0

Major Changes

  • 929ebbf40230e, (opens new window) - The re-exports of side nav item components has been removed. The components must now be imported from @atlaskit/side-nav-items.

    This includes all exports from the previous entrypoints beginning with @atlaskit/navigation-system/side-nav-items/:

    • ContainerAvatar
    • ExpandableMenuItem, ExpandableMenuItemTrigger, ExpandableMenuItemContentg
    • FlyoutMenuItem, FlyoutMenuItemTrigger, FlyoutMenuItemContent, FlyoutHeader, FlyoutBody, FlyoutFooter
    • ButtonMenuItem
    • LinkMenuItem
    • MenuList
    • MenuListItem
    • MenuSection, MenuSectionHeading, Divider
    • TopLevelSpacer
    • LazyDragHandle, DragPreview, DropIndicator, GroupDropIndicator, useMenuItemDragAndDrop

Patch Changes

  • Updated dependencies

5.40.0

Minor Changes

  • d181fe4b076de, (opens new window) - Tidies the platform_dst_nav4_fhs_instrumentation_1 feature gate. Analytics events for sideNavMenu viewedOnLoad + sideNavButton hovered + sideNav expanded + sideNav collapsed are now always fired.

Patch Changes

  • Updated dependencies

5.39.1

Patch Changes

  • Updated dependencies

5.39.0

Minor Changes

  • c987f6814195b, (opens new window) - Fixes a bug where the panel splitter would not be resizable when some browser extensions were installed. This change was previousuly behind the feature flag platform-dst-panel-splitter-drag-start-client-x, which has now been cleaned up.

Patch Changes

  • Updated dependencies

5.38.1

Patch Changes

5.38.0

Minor Changes

5.37.0

Minor Changes

  • accbbfe68dc49, (opens new window) - Decreases the padding to the right of the toggle button when the full height sidebar is enabled, so that it aligns with the other elemAfter items in the side navigation. This change is behind the platform_dst_nav4_fhs_feedback_1 feature gate.

5.36.0

Minor Changes

  • 621d85336693f, (opens new window) - Adds a ribbon grid area to the page layout, and introduces an experimental Ribbon slot component through the /experimental/ribbon entrypoint. This change is behind the platform_dst_nav4_ribbon_slot feature gate.

5.35.0

Minor Changes

5.34.1

Patch Changes

  • Updated dependencies

5.34.0

Minor Changes

  • b9dcd2a2ed822, (opens new window) - Internal refactor to change the imports of side nav item components from @atlaskit/navigation-system to the new package @atlaskit/side-nav-items.

    There are no functional changes - @atlaskit/navigation-system was already just re-exporting them from @atlaskit/side-nav-items.

Patch Changes

  • Updated dependencies

5.33.1

Patch Changes

  • 790a15b2d6cc0, (opens new window) - Fixes a bug behind the platform_dst_nav4_side_nav_resize_tooltip_feedback gate, where the side nav panel splitter tooltip could be mispositioned on scaled displays.
  • Updated dependencies

5.33.0

Minor Changes

  • 57838cec99f29, (opens new window) - Layering refactors have been made to the top nav and full height sidebar, behind the feature gate platform-dst-side-nav-layering-fixes.
    • Layers inside the side nav that are rendered to parent (shouldRenderToParent) will be layered below the top nav and banner.
    • Refactors have been made to the positioning and render location of the side nav panel splitter.

Patch Changes

  • Updated dependencies

5.32.2

Patch Changes

5.32.1

Patch Changes

  • Updated dependencies

5.32.0

Minor Changes

Patch Changes

  • Updated dependencies

5.31.0

Minor Changes

  • c50f9ea3221b7, (opens new window) - The description of menu items will now use the selected state token when the menu item is selected.

    This change was previously behind the feature gate platform-dst-menu-item-description-selected, which has now been cleaned up.

Patch Changes

  • Updated dependencies

5.30.0

Minor Changes

  • 357e243a8b514, (opens new window) - Side nav item components have moved to a new package @atlaskit/side-nav-items.

    The @atlaskit/navigation-system package will re-export them from the new package during the migration period. They will eventually be removed from the @atlaskit/navigation-system package.

    This includes all exports from the entrypoints beginning with @atlaskit/navigation-system/side-nav-items/:

    • ContainerAvatar
    • ExpandableMenuItem, ExpandableMenuItemTrigger, ExpandableMenuItemContentg
    • FlyoutMenuItem, FlyoutMenuItemTrigger, FlyoutMenuItemContent, FlyoutHeader, FlyoutBody, FlyoutFooter
    • ButtonMenuItem
    • LinkMenuItem
    • MenuList
    • MenuListItem
    • MenuSection, MenuSectionHeading, Divider
    • TopLevelSpacer
    • LazyDragHandle, DragPreview, DropIndicator, GroupDropIndicator, useMenuItemDragAndDrop

Patch Changes

  • Updated dependencies

5.29.2

Patch Changes

  • Updated dependencies

5.29.1

Patch Changes

5.29.0

Minor Changes

  • 5b501c4928e72, (opens new window) - Added ref, and onKeyDown, onKeyUp, and onBlurCapture props to FlyoutBody to support keyboard interaction and infinite scrolling.

    Adjusted spacing for FlyoutHeader, FlyoutBody and FlyoutFooter to fix padding and margins.

    Introduced a maxHeight prop on FlyoutMenuItemContent (default 760px) to provide a secondary height clamp for the flyout container.

5.28.1

Patch Changes

  • Updated dependencies

5.28.0

Minor Changes

  • 2ff0f3751e4e4, (opens new window) - Clean up the platform_dst_nav4_layering_in_main_slot_fixes feature gate. This change was abandoned because it broke usage of fixed positioning in apps.

5.27.0

Minor Changes

  • 9cb76d1d2b1a0, (opens new window) - Changes PanelSplitter tooltips to remain vertically within the main content area, behind the platform_dst_nav4_side_nav_resize_tooltip_feedback feature gate.

Patch Changes

  • Updated dependencies

5.26.0

Minor Changes

Patch Changes

  • Updated dependencies

5.25.0

Minor Changes

  • e7b6c5d52b32e, (opens new window) - Adds analytics tracking for flyout menu opening and closing, including the close source (close button, escape key, outside click, other). These additional analytics are behind the platform_dst_nav4_flyout_menu_slots_close_button feature gate.

5.24.0

Minor Changes

  • 2fafe4842f106, (opens new window) - Cleans up the platform_dst_nav4_side_nav_default_collapsed_api feature gate. Default side nav collapsed state can now be passed into the Root component via the defaultSideNavCollapsed prop. This is the preferred API, and the legacy API will be removed at some point in the future.

    This was previously reverted.

5.23.0

Minor Changes

  • 5ebd55afb7494, (opens new window) - The description of menu items will now use the selected state token when the menu item is selected. This change is behind the feature gate platform-dst-menu-item-description-selected.

5.22.0

Minor Changes

5.21.0

Minor Changes

  • 67075d80cdd6b, (opens new window) - Fixes a bug where the panel splitter would not be resizable when some browser extensions were installed. This was caused by the dragstart event incorrectly returning 0 for the client's cursor position (clientX).

    This fix is behind the feature gate platform-dst-panel-splitter-drag-start-client-x.

5.20.0

Minor Changes

  • 2e7328e8eff65, (opens new window) - Modifies the side nav resize tooltip to remain locked on the x-axis relative to the resizer, behind the platform_dst_nav4_side_nav_resize_tooltip_feedback feature gate.

Patch Changes

  • Updated dependencies

5.19.0

Minor Changes

5.18.1

Patch Changes

5.18.0

Minor Changes

  • 67509a09876ad, (opens new window) - The side nav will no longer peek when a popup is open in TopNavStart, such as the app switcher.

    This change is behind the platform_dst_nav4_side_nav_resize_tooltip_feedback and platform-dst-side-nav-layering-fixes feature flags, when full height sidebar is enabled.

Patch Changes

  • Updated dependencies

5.17.0

Minor Changes

  • 6f95ec25daa67, (opens new window) - Fixes to accessibility issues for the flyout menu.

    This includes changing the aria-haspopup value from "true" to "dialog", setting the role of the popup container to "dialog", adding an aria-labelledby to the popup container to reference the id of the title in the header slot, and ensuring that escape dismisses the dialog and places focus back on the trigger.

Patch Changes

  • Updated dependencies

5.16.0

Minor Changes

  • e1393235a54cb, (opens new window) - Layering improvements have been made to the top nav and full height sidebar:

    • Layers inside the side nav that are rendered to parent (shouldRenderToParent) will now correctly be layered above the top nav and banner. This includes some z-index changes to top nav and banner, and changes to where the side nav panel splitter is rendered (portalled) to.
    • The side nav panel splitter will be disabled when there the side nav or top nav contains any open popups.
    • The portalRef prop has also been added to PanelSplitterProvider to support these improvements.

    These changes are behind the platform-dst-side-nav-layering-fixes feature flag, when full height sidebar is enabled.

  • e1393235a54cb, (opens new window) - Fixes a bug where the side nav would not be resizable on screen widths between 48rem and 64rem (768px and 1024px) if the desktop side nav was collapsed.

    This change is behind the feature flag platform-dst-side-nav-layering-fixes.

Patch Changes

  • Updated dependencies

5.15.0

Minor Changes

  • d88efc1c38998, (opens new window) - Fixes to issues from first implementation of FlyoutMenuItem slots and close button.

    This includes fixing comments for the FlyoutMenuItemContext, cleaning up fallback strings for the close button label, and fixing the positioning of the scroll container within the flyout.

5.14.0

Minor Changes

Patch Changes

  • Updated dependencies

5.13.1

Patch Changes

  • Updated dependencies

5.13.0

Minor Changes

Patch Changes

  • Updated dependencies

5.12.3

Patch Changes

5.12.2

Patch Changes

  • fd574581c5176, (opens new window) - Refactor ExpandableMenuItemTrigger props type to use RouterLinkComponentProps generic instead of explicit href prop definition
  • Updated dependencies

5.12.1

Patch Changes

  • Updated dependencies

5.12.0

Minor Changes

Patch Changes

  • Updated dependencies

5.11.1

Patch Changes

  • 64bc203524295, (opens new window) - Adds a patch behind the feature flag platform-dst-nav-app-icon-height-fix, enforcing a max-height on AppLogo to prevent custom App Logos from extending beyond the edges of the container. This flag will be cleaned up in an upcoming release.

5.11.0

Minor Changes

  • f6629e6a4f5ef, (opens new window) - The chevron icon in FlyoutMenuItemTrigger now uses currentColor, instead of the color.icon color token. It will now inherit the same color that the menu item label uses.

    This change was previously behind the feature gate platform_dst_flyout_menu_item_chevron_color, which has now been cleaned up.

Patch Changes

  • Updated dependencies

5.10.2

Patch Changes

5.10.1

Patch Changes

5.10.0

Minor Changes

  • f089cdf7f6a28, (opens new window) - The following top nav items now support displaying a shortcut in their tooltips, through the new shortcut prop:
    • EndItem
    • Notifications
    • Help
    • Profile
    • Settings

5.9.4

Patch Changes

5.9.3

Patch Changes

5.9.2

Patch Changes

  • Updated dependencies

5.9.1

Patch Changes

  • 8ced6a00eae26, (opens new window) - Improving internal types of menu item component.

    Enhanced ref handling in MenuItemBase to work better with the updated mergeRefs utility, providing improved TypeScript compatibility.

  • ab9386b25161d, (opens new window) - Fixed bug where toggle button click was still using the old full height sidebar feature gate to close layers

  • Updated dependencies

5.9.0

Minor Changes

5.8.2

Patch Changes

  • Updated dependencies

5.8.1

Patch Changes

5.8.0

Minor Changes

5.7.0

Minor Changes

  • 8b3783c70ef57, (opens new window) - Clicking on the side nav toggle button will now close any open layers such as tooltips. This ensures tooltips don't linger on the screen when the buttons inside TopNavStart are reordered.

    This change is behind the feature flag navx-full-height-sidebar.

Patch Changes

  • Updated dependencies

5.6.0

Minor Changes

  • b5802cb0960a2, (opens new window) - Change how full height sidebar is enabled. Instead of a feature gate, use a context value that apps can set themselves using their own feature gate or experiment.

5.5.1

Patch Changes

5.5.0

Minor Changes

  • 0fd231aa18bd4, (opens new window) - The tooltip for truncated side nav menu item has been updated:

    • The tooltip now uses the standard tooltip styling and behavior, instead of using a custom component.
    • The tooltip position has been updated to right-start (previously it was right).

    These changes were previously behind the feature gate platform_dst_side_nav_remove_custom_tooltip, which has now been removed.

5.4.0

Minor Changes

  • 05dd9b7db95b7, (opens new window) - The built-in keyboard shortcut for toggling the side nav will check if there are any open modals and ignore the shortcut if there are.

    This check was previously behind the feature gate platform-dst-open-layer-observer-layer-type, which has now been removed.

Patch Changes

  • Updated dependencies

5.3.4

Patch Changes

  • Updated dependencies

5.3.3

Patch Changes

  • 5e4877d22ecd0, (opens new window) - Renames the viewed analytics event behind the platform_dst_nav4_fhs_instrumentation_1 feature gate to use viewedOnLoad as the action name. This is to avoid a conflict with an existing event in Global Side Navigation.

5.3.2

Patch Changes

  • Updated dependencies

5.3.1

Patch Changes

5.3.0

Minor Changes

  • c8cb0a09979c1, (opens new window) - Adds instrumentation to the side navigation behind the platform_dst_nav4_fhs_instrumentation_1 feature gate.
  • c8cb0a09979c1, (opens new window) - Changes the trigger property in the side nav onExpand and onCollapse callbacks to be exposed behind the platform_dst_nav4_fhs_instrumentation_1 feature gate instead of the navx-full-height-sidebar feature gate. The platform_dst_nav4_fhs_instrumentation_1 feature gate is intended to roll out sooner.
  • f942d05c8a8f2, (opens new window) - Adds support for selected state in ButtonMenuItem component (under feature gate platform-dst-buttonmenuitem-selected-state-support)

5.2.0

Minor Changes

  • fef4ccb6af01f, (opens new window) - Cleans up the platform_dst_nav4_side_nav_default_collapsed_api feature gate. Default side nav collapsed state can now be passed into the Root component via the defaultSideNavCollapsed prop. This is the preferred API, and the legacy API will be removed at some point in the future.

Patch Changes

  • Updated dependencies

5.1.0

Minor Changes

  • 03b6f055c6340, (opens new window) - The SideNavPanelSplitter component is now exported from @atlaskit/navigation-system/layout/side-nav. It should be used within the SideNav layout area.

    It supports double clicking to collapse the side nav. You can conditionally disable this through the shouldCollapseOnDoubleClick prop. It is enabled by default.

    It also supports displaying a tooltip when hovered, through the tooltipContent prop. This should be used to explain the double click to collapse interaction. The recommended tooltip content is "Double click to collapse".

    A tooltip will only be displayed if the shouldCollapseOnDoubleClick prop is true, or not provided (as it defaults to true), and if the tooltipContent prop is provided.

    If the isSideNavShortcutEnabled prop is enabled on <Root />, the built-in keyboard shortcut will be displayed with the tooltip.

    Example usage:

    import { SideNav, SideNavPanelSplitter } from '@atlaskit/navigation-system/layout/side-nav'; // In component: <SideNav> <SideNavPanelSplitter label="Double click to collapse" /> </SideNav>;

5.0.2

Patch Changes

  • bb5f1424b34de, (opens new window) - [ux] Fixes the scrolled indicator in SideNavContent to set initial state for SSR'd scroll position. Behind the navx-full-height-sidebar gate.

5.0.1

Patch Changes

5.0.0

Major Changes

  • ea9dfe33b50c1, (opens new window) - Several changes have been made to the tooltip keyboard shortcut functionality:

    • The shortcut prop has been removed from SideNavToggleButton, PanelSplitter, and SideNavPanelSplitter. The keyboard shortcut used in the tooltips for these components is now controlled internally for consistency, and cannot be configured. It is set to ["Ctrl", "["]. The shortcuts will only be displayed in the tooltips for SideNavToggleButton and SideNavPanelSplitter when the isSideNavShortcutEnabled prop is enabled on the Root component. This is behind the navx-full-height-sidebar feature flag - previously, the shortcuts prop (now removed) was behind the platform-dst-tooltip-shortcuts feature flag.

    • The shortcuts prop has been added to PanelSplitterProvider, so that layout components (e.g. SideNav) can specify the keyboard shortcuts used for the panel splitters that are rendered within them, instead of consumers needing to specify them.

    • SideNavPanelSplitter will now only render a tooltip if shouldCollapseOnDoubleClick is true. If it is false, the tooltipContent prop will be ignored.

4.6.0

Minor Changes

  • 5bda2d3b2d6cd, (opens new window) - Clicking dropdown menu items will no longer collapse the side navigation on mobile. This change was behind a feature flag, which has now been removed.

4.5.1

Patch Changes

  • f5e53b7b1e130, (opens new window) - Use IconRenderer for Themed IconButtons to mitigate their DOM be recreated during SSR -> SPA hydration, which delays TTVC. This is an experiment behind platform_themed_button_use_icon_renderer.

4.5.0

Minor Changes

  • 8a71ce992f8c8, (opens new window) - SideNav now provides a built-in keyboard shortcut for expanding and collapsing. This is behind the feature gate navx-full-height-sidebar.
    • The shortcut key is Ctrl + [.
    • The shortcut is not enabled by default.
    • The prop isSideNavShortcutEnabled has been added to Root, as a way to control whether the shortcut is enabled (whether the keyboard event listener is binded). It defaults to false.
    • The prop canToggleWithShortcut() has been added to SideNav, as a way to run additional checks after the shortcut is pressed, before the side nav is toggled.
    • The shortcut will also be ignored if there are any open modals. This check is behind the feature gate platform-dst-open-layer-observer-layer-type.

Patch Changes

  • Updated dependencies

4.4.0

Minor Changes

4.3.0

Minor Changes

  • 4bb7b31bfda3b, (opens new window) - Refactors changes that were previously behind platform_dst_nav4_full_height_sidebar_api_changes to now be behind platform_dst_nav4_side_nav_default_collapsed_api. After rollout, both the new and legacy APIs for defining side nav initial state will be supported.

4.2.0

Minor Changes

  • 5ab567cfb4d29, (opens new window) - Cleans up the platform_dst_nav4_panel_splitter_guards feature gate. Panel splitters will now use a safe fallback default width if the provided default width is not an integer.

Patch Changes

  • Updated dependencies

4.1.0

Minor Changes

Patch Changes

  • Updated dependencies

4.0.0

Major Changes

3.1.1

Patch Changes

  • ac431cadd9a33, (opens new window) - Fixes a regression when the navx-full-height-sidebar feature gate is enabled, where the peeking side nav would close if the user mouses over the TopNavStart element.

3.1.0

Minor Changes

  • ee578a4721dcf, (opens new window) - The following animations have been updated to shorten their durations from 300ms to 200ms. These changes are behind the navx-full-height-sidebar feature flag.
    • SideNav slide in/out animations, including peek (flyout) and regular expand/collapse
    • TopNavStart button reorder animations

3.0.1

Patch Changes

3.0.0

Major Changes

  • f32509352e004, (opens new window) - MenuSectionHeading has been updated to use regular text (p element) instead of a heading (h2 element). This change was behind a feature flag, which has now been cleaned up.

    This has been done to resolve accessibility issues with the component. It does not need to be a heading semantically.

Patch Changes

  • Updated dependencies

2.23.1

Patch Changes

  • Updated dependencies

2.23.0

Minor Changes

  • 46f39b03ba41d, (opens new window) - The menu item actionsOnHover slot has been updated to improve accessibility. These changes were previously behind a feature flag, which has now been removed. These changes are now available for all consumers.

    • Popup triggers placed inside the slot will now correctly be focused when closing their respective popups.

    • Interactive elements placed inside the slot will be in the tab order when tabbing backwards.

2.22.0

Minor Changes

  • 3c732646f3e19, (opens new window) - The tooltip for truncated side nav menu item has been updated behind the feature gate platform_dst_side_nav_remove_custom_tooltip:
    • The tooltip now uses the standard tooltip styling and behavior, instead of using a custom component.
    • The tooltip position has been updated to right-start (previously it was right).

2.21.1

Patch Changes

  • Updated dependencies

2.21.0

Minor Changes

  • 3476b9c121ef9, (opens new window) - Side nav animations have been updated to support right-to-left (RTL) languages/text direction. This change is behind the feature gate navx-full-height-sidebar.

    This includes:

    • SideNav peek animations
    • SideNav expand and collapse animations
    • TopNavStart reorder animations

2.20.0

Minor Changes

  • bfed073f1849d, (opens new window) - Animations have been added to the TopNavStart component, as part of the full height sidebar animations. The reorder of TopNavStart's children elements (toggle button, app switcher, app logo) when the side nav is toggled (on desktop) will have slide animations.

    These changes are behind the feature gate navx-full-height-sidebar.

2.19.1

Patch Changes

  • 8622b99ec3d36, (opens new window) - Internal refactors to the full height sidebar animations to workaround some Compiled style ordering issues. These changes are behind the feature gate navx-full-height-sidear.

2.19.0

Minor Changes

2.18.0

Minor Changes

  • 35dbcb50e7873, (opens new window) - Changes TopNavMiddle items (search + create) to now be centred on large desktop screens, when the navx-full-height-sidear feature gate is enabled.

2.17.0

Minor Changes

  • dc96cee1f923a, (opens new window) - Minor improvements to the side nav peek (flyout) animations. These changes are behind the navx-full-height-sidebar feature flag.

    • The timing functions for the peek and hide animations have been slightly tweaked to align with the new full height sidebar animations
    • The peek animation duration has been increased to 300ms from 200ms to align with the new full height sidebar animations
    • During the collapse animation, the flyout will now maintain its background color and box-shadow. They were previously unset as soon as the animation started.

  • dc96cee1f923a, (opens new window) - [ux] The sidebar will now animate when expanding and collapsing on supported browsers. Currently Firefox is not supported. This change is behind the feature gate navx-full-height-sidebar.

    The sidebar previously only animated when peeking (flyout mode). This change makes it animate on regualar toggles as well. The Main layout area will still instantly "snap" into its new position without any animations.

2.16.0

Minor Changes

  • d219613fe59b7, (opens new window) - When a FlyoutMenuItemContent is open, clicking outside the content will close the flyout. We have improved this functionality to make it more resilient to application code that stops events.

    This change was previously behind a feature flag, which has now been removed.

2.15.0

Minor Changes

2.14.2

Patch Changes

2.14.1

Patch Changes

2.14.0

Minor Changes

  • 3ea3fab89f015, (opens new window) - SideNavToggleButton now supports displaying keyboard shortcuts in its tooltip through the shortcut prop.

    PanelSplitter can now display a tooltip with an optional keyboard shortcut on hover or focus. A tooltip will be rendered when either the tooltipContent or shortcut prop is set.

    These new props are currently behind the platform-dst-tooltip-shortcuts feature flag.

Patch Changes

  • Updated dependencies

2.13.0

Minor Changes

  • 9d65ef412f30c, (opens new window) - Cleans up the platform_design_system_nav4_sidenav_border feature gate. The side nav border is now only applied when it does not have a shadow.

Patch Changes

2.12.0

Minor Changes

2.11.1

Patch Changes

2.11.0

Minor Changes

  • 825c15fd948fa, (opens new window) - Adds a top border to the side nav content when scrolled, behind the navx-full-height-sidebar feature gate.

  • d8b6ae4334ce7, (opens new window) - [ux] The minimum width of the TopNavStart and TopNavEnd slots has been increased to 330px from 300px. This change is behind a feature flag.

    This is to accommodate larger logos without causing layout shifts in the top nav, when the logo changes in a SPA transition.

  • 799d003290f7b, (opens new window) - The chevron icon in FlyoutMenuItemTrigger now uses currentColor when the platform_dst_flyout_menu_item_chevron_color feature flag is enabled.

    It was previously using the color.icon color token. It will now inherit the same color that the menu item label uses.

2.10.2

Patch Changes

2.10.1

Patch Changes

2.10.0

Minor Changes

  • 8c5f4864d7d4c, (opens new window) - Adds defaultSideNavCollapsed prop to Root which replaces the defaultCollapsed props on SideNav and SideNavToggleButton. This prop is enabled behind the platform_dst_nav4_full_height_sidebar_api_changes feature gate. When this gate is cleaned up the defaultCollapsed props will be removed.

2.9.0

Minor Changes

  • d64bfbee2463f, (opens new window) - Cleans up the platform_design_system_nav4_panel_mobile_width_fix feature gate. Mobile panel sizes are now more consistent with their desktop sizes, when screen width permits.

Patch Changes

  • Updated dependencies

2.8.0

Minor Changes

  • a515e172559b8, (opens new window) - Adds sideNavToggleButton slot to TopNavStart to be used instead of rendering <SideNavToggleButton> as a child. When navx-full-height-sidebar is enabled, the slot is used to move the button between start and end positions based on sidebar collapse state.
  • a515e172559b8, (opens new window) - App logo text will now truncate if there is no available space, when navx-full-height-sidebar is enabled.

2.7.0

Minor Changes

Patch Changes

  • Updated dependencies

2.6.1

Patch Changes

2.6.0

Minor Changes

2.5.0

Minor Changes

2.4.1

Patch Changes

2.4.0

Minor Changes

2.3.4

Patch Changes

  • Updated dependencies

2.3.3

Patch Changes

2.3.2

Patch Changes

  • Updated dependencies

2.3.1

Patch Changes

2.3.0

Minor Changes

  • 40dea92e11501, (opens new window) - MenuSectionHeading has been updated to use regular text (p element) instead of a heading (h2 element). This change is behind a feature flag.

    This has been done to resolve accessibility issues with the component. It does not need to be a heading semantically.

2.2.0

Minor Changes

  • cf5e597de761c, (opens new window) - Adds a trigger value to the side nav's onExpand and onCollapse callbacks, allowing consumers to identify the method used to expand or collapse the side nav. Also adds the ability to define the trigger value when using the useToggleSideNav and useExpandSideNav hooks. This change is behind the navx-full-height-sidebar feature gate.

Patch Changes

  • Updated dependencies

2.1.3

Patch Changes

2.1.2

Patch Changes

  • e276abaa88f28, (opens new window) - The SideNavToggleButton, useExpandSideNav and useToggleSideNav functions have been updated to not throw an error if the side nav state is not initialised (for example, if the SideNav has not mounted yet).

2.1.1

Patch Changes

2.1.0

Minor Changes

  • 8f30ac4ceb737, (opens new window) - Adds extra guards for resizable slots to avoid invalid widths being set. This change is behind the platform_dst_nav4_panel_splitter_guards feature gate.

Patch Changes

  • Updated dependencies

2.0.0

Major Changes

  • ca468a8bbccd9, (opens new window) - The elemBefore chevron icon button in the link (selectable) variants of ExpandableMenuItemTrigger is now labelled by the menu item (specifically, its anchor element) through the aria-labelledby attribute. This is to provide context on what will be expanded or collapsed to screen readers. Assistive technology users will still have the aria-expanded attribute to determine the expanded state.

    This change was previously behind a feature flag, which has now been removed.

    More details:

    Previously, the chevron icon button would be labelled by the hardcoded strings "Expand" or "Collapse" - which is not helpful for screen readers.

    Now, the chevron icon button is labelled by the menu item trigger content (children).

    For example, for the below expandable menu item trigger:

    <ExpandableMenuItemTrigger href="#">Recent</ExpandableMenuItemTrigger>

    Previously, the chevron icon button would be a button element with the name "Expand" or "Collapse", based on the expanded state.

    Now, the chevron icon button will be a button element with the name "Recent".

    You will likely need to update your tests to account for this change, by using a different selector.

Patch Changes

  • Updated dependencies

1.2.0

Minor Changes

  • c48c55f280ef8, (opens new window) - FlyoutMenuItemContent will render its popup alongside the trigger, instead of using a portal. This improves the experience for assistive technology users.

    This change is behind a feature flag.

1.1.0

Minor Changes

  • e40aa48c11a02, (opens new window) - The menu item actionsOnHover slot has been updated, behind a feature flag, to improve accessibility.

    • Popup triggers placed inside the slot will now correctly be focused when closing their respective popups.

    • Interactive elements placed inside the slot will be in the tab order when tabbing backwards.

1.0.0

Major Changes

  • 9fb179b645f2d, (opens new window) - This package is now in beta and is no longer considered experimental. We will be making iterative improvements until GA.

    This release contains no changes whatsoever.

Patch Changes

0.183.0

Minor Changes

Patch Changes

0.182.0

Minor Changes

Patch Changes

0.181.1

Patch Changes

  • Updated dependencies

0.181.0

Minor Changes

  • 1e64de395c7b5, (opens new window) - Cleans up the platform_dst_nav4_flyout_update_on_resize feature gate. Flyout menus now correctly reposition when their content changes size.

Patch Changes

  • Updated dependencies

0.180.0

Minor Changes

0.179.0

Minor Changes

0.178.0

Minor Changes

Patch Changes

0.177.3

Patch Changes

0.177.2

Patch Changes

0.177.1

Patch Changes

0.177.0

Minor Changes

  • e12d813a2d3fd, (opens new window) - The default height of the Banner layout area has been updated to 48px, down from 64px, to align with the height of the @atlaskit/banner component. This change was previously behind a feature flag, which has now been removed.

Patch Changes

  • Updated dependencies

0.176.2

Patch Changes

  • Updated dependencies

0.176.1

Patch Changes

0.176.0

Minor Changes

Patch Changes

  • Updated dependencies

0.175.1

Patch Changes

  • Updated dependencies

0.175.0

Minor Changes

  • #189410, (opens new window) 5e491d9960a3f, (opens new window) - When a FlyoutMenuItemContent is open, clicking outside the content will close the flyout. We have improved this functionality to make it more resilient to application code that stops events. This changed is behind the feature flag "platform_dst_nav4_flyout_use_capture_outside"

Patch Changes

  • Updated dependencies

0.174.0

Minor Changes

Patch Changes

  • Updated dependencies

0.173.0

Minor Changes

Patch Changes

0.172.0

Minor Changes

Patch Changes

0.171.0

Minor Changes

0.170.0

Minor Changes

Patch Changes

  • Updated dependencies

0.169.1

Patch Changes

0.169.0

Minor Changes

Patch Changes

  • Updated dependencies

0.168.0

Minor Changes

0.167.3

Patch Changes

0.167.2

Patch Changes

  • Updated dependencies

0.167.1

Patch Changes

  • Updated dependencies

0.167.0

Minor Changes

Patch Changes

  • Updated dependencies

0.166.0

Minor Changes

0.165.0

Minor Changes

  • #173276, (opens new window) d2bd64e49cecd, (opens new window) - 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.

0.164.1

Patch Changes

  • Updated dependencies

0.164.0

Minor Changes

  • #172292, (opens new window) e14bf25b72dba, (opens new window) - The entrypoints under @atlassian/navigation-system/side-nav/ have been renamed to use the prefix @atlassian/navigation-system/side-nav-items/.

    The full list of changes are:

    Before

    '@atlassian/navigation-system/side-nav/container-avatar'; '@atlassian/navigation-system/side-nav/expandable-menu-item'; '@atlassian/navigation-system/side-nav/flyout-menu-item'; '@atlassian/navigation-system/side-nav/button-menu-item'; '@atlassian/navigation-system/side-nav/link-menu-item'; '@atlassian/navigation-system/side-nav/menu-list'; '@atlassian/navigation-system/side-nav/menu-list-item'; '@atlassian/navigation-system/side-nav/menu-section'; '@atlassian/navigation-system/side-nav/top-level-spacer'; '@atlassian/navigation-system/side-nav/drag-and-drop/hitbox'; '@atlassian/navigation-system/side-nav/drag-and-drop/drag-preview'; '@atlassian/navigation-system/side-nav/drag-and-drop/drop-indicator'; '@atlassian/navigation-system/side-nav/drag-and-drop/group-drop-indicator'; '@atlassian/navigation-system/side-nav/drag-and-drop/use-menu-item-drag-and-drop';

    After

    '@atlassian/navigation-system/side-nav-items/container-avatar'; '@atlassian/navigation-system/side-nav-items/expandable-menu-item'; '@atlassian/navigation-system/side-nav-items/flyout-menu-item'; '@atlassian/navigation-system/side-nav-items/button-menu-item'; '@atlassian/navigation-system/side-nav-items/link-menu-item'; '@atlassian/navigation-system/side-nav-items/menu-list'; '@atlassian/navigation-system/side-nav-items/menu-list-item'; '@atlassian/navigation-system/side-nav-items/menu-section'; '@atlassian/navigation-system/side-nav-items/top-level-spacer'; '@atlassian/navigation-system/side-nav-items/drag-and-drop/hitbox'; '@atlassian/navigation-system/side-nav-items/drag-and-drop/drag-preview'; '@atlassian/navigation-system/side-nav-items/drag-and-drop/drop-indicator'; '@atlassian/navigation-system/side-nav-items/drag-and-drop/group-drop-indicator'; '@atlassian/navigation-system/side-nav-items/drag-and-drop/use-menu-item-drag-and-drop';

    This change is part of a larger group of changes to the package to prepare it for early access.

0.163.1

Patch Changes

0.163.0

Minor Changes

  • #171544, (opens new window) 855881697b291, (opens new window) - The following components have been renamed:

    • MenuLinkItem -> LinkMenuItem
    • MenuButtonItem -> ButtonMenuItem

    Their imports have been updated to use the new names.

    • @atlassian/navigation-system/side-nav/menu-link-item -> @atlassian/navigation-system/side-nav/link-menu-item
    • @atlassian/navigation-system/side-nav/menu-button-item -> @atlassian/navigation-system/side-nav/button-menu-item

    This change is part of a larger group of changes to the package to prepare it for early access.

Patch Changes

0.162.0

Minor Changes

0.161.0

Minor Changes

  • #169983, (opens new window) c72e85f165c1b, (opens new window) - A number of components have been renamed:

    • TopBar -> TopNav
    • HomeActions -> TopNavStart
    • CommonActions -> TopNavMiddle
    • UserActions -> TopNavEnd
    • UserAction -> EndItem

    The @atlassian/navigation-system/layout/top-bar entrypoint has been renamed to @atlassian/navigation-system/layout/top-nav.

    The following components have been moved from the @atlassian/navigation-system/top-nav-items entrypoint to the @atlassian/navigation-system/layout/top-nav entrypoint:

    • TopNavStart
    • TopNavMiddle
    • TopNavEnd

    This change is part of a larger group of changes to the package to prepare it for early access.

0.160.0

Minor Changes

  • #169332, (opens new window) d1551201c8a62, (opens new window) - The @atlassian/navigation-system/top-nav entrypoint has been renamed to @atlassian/navigation-system/top-nav-items. This also applies to child entrypoints of this path, such as @atlassian/navigation-system/top-nav-items/notifications,

    This change is part of a larger group of changes to the package to prepare it for early access.

Patch Changes

  • Updated dependencies

0.159.0

Minor Changes

Patch Changes

  • Updated dependencies

0.158.1

Patch Changes

0.158.0

Minor Changes

  • #167316, (opens new window) 931d2609cecc6, (opens new window) - Deprecates the isFixed prop on Main and Aside slots. This prop determines if the slot scrolls with the body, or if it has its own scroll container.

    Adds the platform_dst_nav4_disable_is_fixed_prop feature gate to disable existing usage. When enabled the isFixed prop on the Main and Aside slots will be ignored and the isFixed={true} behavior will always be applied. After rollout the isFixed prop will be removed.

    We are removing the isFixed prop because the isFixed={false} behavior has caused bugs, and we believe that removing this prop will improve outcomes for users and lower our maintenance burden.

    See https://hello.atlassian.net/wiki/spaces/DST/pages/5400167974, (opens new window) for more information.

Patch Changes

  • Updated dependencies

0.157.0

Minor Changes

Patch Changes

  • Updated dependencies

0.156.1

Patch Changes

0.156.0

Minor Changes

0.155.0

Minor Changes

Patch Changes

  • Updated dependencies

0.154.7

Patch Changes

  • Updated dependencies

0.154.6

Patch Changes

0.154.5

Patch Changes

  • Updated dependencies

0.154.4

Patch Changes

0.154.3

Patch Changes

0.154.2

Patch Changes

0.154.1

Patch Changes

0.154.0

Minor Changes

Patch Changes

  • Updated dependencies

0.153.0

Minor Changes

Patch Changes

  • Updated dependencies

0.152.0

Minor Changes

0.151.0

Minor Changes

0.150.0

Minor Changes

  • #155125, (opens new window) e7c9adbec6388, (opens new window) - usePrefixedUID has been replaced by useSkipLinkId. It was previously updated to remove the unnecessary prefix, behind a feature flag. That feature flag is now being removed.

    As part of cleaning up the feature flag, we are renaming the hook to reflect the new behavior.

0.149.0

Minor Changes

Patch Changes

  • Updated dependencies

0.148.1

Patch Changes

0.148.0

Minor Changes

0.147.1

Patch Changes

  • Updated dependencies

0.147.0

Minor Changes

0.146.0

Minor Changes

  • #149907, (opens new window) 178e3451a3c4b, (opens new window) - The border has been removed from ContainerAvatar. This change is behind a feature flag.

    The default value of the appearance prop would previously apply a border. This will no longer be the case when the feature flag is enabled. It will have the same style as the appearance="subtle" variant. This will become the new default and only style.

    The appearance prop will later be removed when the feature flag is cleaned up.

Patch Changes

0.145.0

Minor Changes

Patch Changes

  • Updated dependencies

0.144.2

Patch Changes

  • Updated dependencies

0.144.1

Patch Changes

  • Updated dependencies

0.144.0

Minor Changes

0.143.0

Minor Changes

Patch Changes

  • Updated dependencies

0.142.0

Minor Changes

Patch Changes

  • Updated dependencies

0.141.0

Minor Changes

0.140.1

Patch Changes

0.140.0

Minor Changes

0.139.1

Patch Changes

0.139.0

Minor Changes

Patch Changes

  • #139445, (opens new window) 0f13df85731d6, (opens new window) - the component state update causes React Streming to have Suspense boundary received update before hydrating finished error. Wrapping the state update in startTransition

  • #137059, (opens new window) 8d6a3a75c70f1, (opens new window) - [ux] Changes the resizing bounds of the Panel slot to have a:

    • Minimum resizing width equal to the defaultWidth (up to a maximum of 400px)
    • Maximum resizing width of half the viewport width after the sidebar has been removed. This means that the Panel will not be larger than the content.

    Additionally, the --leftSidebarWidth CSS variable is now updated live during resizing.

    These changes are behind the platform_design_system_nav4_preview_panel_support gate.

  • Updated dependencies

0.138.0

Minor Changes

  • #141596, (opens new window) b544669f5d156, (opens new window) - Exposing type Availability from hitbox. Availability is the type that is provided to attachInstruction

    type Availability = 'available' | 'not-available' | 'blocked'; import { type Availability, attachInstruction, } from '@atlassian/navigation-system/side-nav/drag-and-drop/hitbox'; const value: Availability = 'available'; dropTargetForElements({ getData(args) { const data = { type: 'menu-item' }; return attachInstruction(data, { input: args.input, element: args.element, operations: { 'reorder-above': value, // 👆 this is an `Availability` }, }); }, });

0.137.0

Minor Changes

0.136.0

Minor Changes

Patch Changes

  • Updated dependencies

0.135.0

Minor Changes

0.134.0

Minor Changes

Patch Changes

  • Updated dependencies

0.133.0

Minor Changes

Patch Changes

  • Updated dependencies

0.132.0

Minor Changes

Patch Changes

  • Updated dependencies

0.131.0

Minor Changes

0.130.1

Patch Changes

  • Updated dependencies

0.130.0

Minor Changes

0.129.0

Minor Changes

Patch Changes

  • Updated dependencies

0.128.0

Minor Changes

0.127.1

Patch Changes

  • Updated dependencies

0.127.0

Minor Changes

Patch Changes

  • Updated dependencies

0.126.0

Minor Changes

0.125.1

Patch Changes

  • Updated dependencies

0.125.0

Minor Changes

0.124.1

Patch Changes

  • Updated dependencies

0.124.0

Minor Changes

0.123.0

Minor Changes

Patch Changes

  • Updated dependencies

0.122.1

Patch Changes

0.122.0

Minor Changes

0.121.0

Minor Changes

0.120.1

Patch Changes

0.120.0

Minor Changes

Patch Changes

0.119.1

Patch Changes

0.119.0

Minor Changes

  • #127254, (opens new window) 664b2457a0d05, (opens new window) - Updated MenuButtonItem to support the disabled state. It now sets explicit disabled styles.

    This change is no longer behind a feature flag.

    When isDisabled is true, the actions and actionsOnHover are not supported. The component types have been updated to enforce this.

0.118.0

Minor Changes

0.117.1

Patch Changes

0.117.0

Minor Changes

Patch Changes

  • Updated dependencies

0.116.0

Minor Changes

0.115.5

Patch Changes

  • Updated dependencies

0.115.4

Patch Changes

0.115.3

Patch Changes

  • Updated dependencies

0.115.2

Patch Changes

0.115.1

Patch Changes

0.115.0

Minor Changes

0.114.0

Minor Changes

0.113.2

Patch Changes

0.113.1

Patch Changes

  • Updated dependencies

0.113.0

Minor Changes

0.112.0

Minor Changes

Patch Changes

  • Updated dependencies

0.111.0

Minor Changes

0.110.1

Patch Changes

  • Updated dependencies

0.110.0

Minor Changes

  • #120414, (opens new window) 3722a78098896, (opens new window) - Adds isListItem prop to user action components such as Profile. This allows you to disable the default list item wrapper. It is intended for use with dropdown menus, and requires you to render your own <MenuListItem> wrapper. See the prop JSDocs for an example.

0.109.0

Minor Changes

0.108.0

Minor Changes

0.107.0

Minor Changes

0.106.1

Patch Changes

  • Updated dependencies

0.106.0

Minor Changes

Patch Changes

  • Updated dependencies

0.105.1

Patch Changes

0.105.0

Minor Changes

Patch Changes

0.104.0

Minor Changes

0.103.0

Minor Changes

Patch Changes

0.102.0

Minor Changes

  • #113860, (opens new window) a4abb72bf5dde, (opens new window) - [ux] Expandable menu items will now keep the chevron icon displayed when there is a nested popup open, such as a "More" submenu.

    This fixes a bug with the icon flickering between the custom elemBefore icon and the chevron icon when the user hovers over a nested popup.

    This change is behind a feature flag.

0.101.0

Minor Changes

0.100.1

Patch Changes

0.100.0

Minor Changes

0.99.0

Minor Changes

0.98.0

Minor Changes

0.97.0

Minor Changes

0.96.1

Patch Changes

  • Updated dependencies

0.96.0

Minor Changes

0.95.0

Minor Changes

0.94.0

Minor Changes

0.93.0

Minor Changes

Patch Changes

  • Updated dependencies

0.92.0

Minor Changes

0.91.0

Minor Changes

0.90.0

Minor Changes

0.89.0

Minor Changes

Patch Changes

  • Updated dependencies

0.88.0

Minor Changes

0.87.0

Minor Changes

Patch Changes

0.86.0

Minor Changes

0.85.1

Patch Changes

  • Updated dependencies

0.85.0

Minor Changes

0.84.0

Minor Changes

0.83.0

Minor Changes

0.82.0

Minor Changes

0.81.1

Patch Changes

  • Updated dependencies

0.81.0

Minor Changes

  • #178696, (opens new window) 3cabcfbd4725e, (opens new window) - Top bar custom theming now accepts RGB color objects. Hex strings are still supported for backwards compatibility but may be removed in the future.

    Color inputs should be parsed into RGB objects before providing them as the custom theme.

    We now export multiple utility functions to assist with color parsing:

    • Hex parsing with parseHex from @atlassian/navigation-system/experimental/color-utils/parse-hex
    • CSS hsl() parsing with parseHsl from @atlassian/navigation-system/experimental/color-utils/parse-hsl
    • CSS rgb() parsing with parseRgb from @atlassian/navigation-system/experimental/color-utils/parse-rgb

    You can also use parseUserColor from @atlassian/navigation-system/experimental/color-utils/parse-user-color if you're not sure which color notation is used.

    Example usage:

    <TopBar UNSAFE_theme={{ backgroundColor: parseRgb('rgb(200, 100, 0)'), highlightColor: parseHsl('hsl(90deg, 75%, 25%)'), }} />

0.80.0

Minor Changes

0.79.1

Patch Changes

  • Updated dependencies

0.79.0

Minor Changes

0.78.2

Patch Changes

  • Updated dependencies

0.78.1

Patch Changes

  • Updated dependencies

0.78.0

Minor Changes

  • #176005, (opens new window) a7f4659856234, (opens new window) - Adds visualContentRef prop to:

    • ExpandableMenuItemTrigger
    • FlyoutMenuItemTrigger
    • MenuButtonItem
    • MenuLinkItem

    Adds listItemRef to:

    • MenuButtonItem
    • MenuLinkItem

    These expose useful parts of the component's markup, in addition to the existing ref which exposes the main interactive element.

0.77.0

Minor Changes

Patch Changes

0.76.1

Patch Changes

0.76.0

Minor Changes

  • #171400, (opens new window) a00e4d1e4e1c5, (opens new window) - Label props have been standardised across the components under @atlassian/navigation-system/top-nav.

    The following components previously had an optional label prop, which has now been made required:

    • Help
    • NavLogo
    • Notifications

    The following components previously used the children prop as the label, but have now been updated to use a required label prop:

    • Settings
    • Profile
    • UserAction

  • #171400, (opens new window) ca52c3e39178a, (opens new window) - ShowMoreButton has been removed as an exported package. It is no longer needed. There is responsiveness built into the top nav UserActions component, to place the user action list inside a popup behind a "Show more" button.

Patch Changes

0.75.0

Minor Changes

Patch Changes

0.74.0

Minor Changes

0.73.0

Minor Changes

0.72.1

Patch Changes

  • Updated dependencies

0.72.0

Minor Changes

0.71.0

Minor Changes

  • #162526, (opens new window) 9a0c103641a2f, (opens new window) - Menu items are now more resilient to narrow widths and deep nesting.
    • A minimum width of 72px has been set on menu items.
    • The menu item slots (elemBefore, elemAfter, actions, actionsOnHover) now hide overflowing content to prevent content spilling out or overlapping other slots when space is limited.

0.70.2

Patch Changes

0.70.1

Patch Changes

0.70.0

Minor Changes

0.69.0

Minor Changes

  • #162544, (opens new window) 82e257cd98330, (opens new window) - [ux] Updated UserActions in the top nav to be responsive, controlled by the feature flag platform_design_system_topnav_responsive_menuitems. This wrapper collapses into a popup on smaller viewports. The list items are displayed in a row on desktop viewports and in a popup on smaller viewports.

0.68.0

Minor Changes

0.67.0

Minor Changes

  • f7d6d9fa3d9c3, (opens new window) - The indentation of expandable menu item content has been reduced. This was previously behind a feature flag as of version 0.49.1, and is no longer behind a feature flag.

0.66.0

Minor Changes

  • be6f923511512, (opens new window) - ExpandableMenuItemTrigger, FlyoutMenuItemTrigger, MenuLinkItem and MenuButtonItem will now conditionally show a tooltip when it's content is truncated. This can be disabled with the isContentTooltipDisabled prop. This change is currently behind a feature flag.

    A testId prop added to ExpandableMenuItemTrigger.

Patch Changes

  • Updated dependencies

0.65.0

Minor Changes

0.64.1

Patch Changes

0.64.0

Minor Changes

0.63.0

Minor Changes

  • #156108, (opens new window) c3366ec919883, (opens new window) - The side nav slots and scroll container feature flag has been cleaned up. The following changes are now available for all consumers:

    • PanelSplitterProvider no longer renders a scroll container, and no longer adds a flex container.
    • SideNavContent renders a scroll container.
    • SideNavContent no longer renders a ul - it now renders a div. If you need a list element for semantics, compose in a MenuList.
    • SideNav now renders a flex container to control the layout of the header, content, and footer slots.

    They were previously behind a feature flag in version 0.53.0.

  • #156108, (opens new window) c3366ec919883, (opens new window) - A testId prop has been added to SideNavContent.

0.62.1

Patch Changes

0.62.0

Minor Changes

Patch Changes

0.61.0

Minor Changes

0.60.0

Minor Changes

0.59.1

Patch Changes

0.59.0

Minor Changes

0.58.1

Patch Changes

  • Updated dependencies

0.58.0

Minor Changes

0.57.0

Minor Changes

0.56.2

Patch Changes

0.56.1

Patch Changes

0.56.0

Minor Changes

Patch Changes

0.55.0

Minor Changes

Patch Changes

  • Updated dependencies

0.54.0

Minor Changes

Patch Changes

0.53.0

Minor Changes

Patch Changes

0.52.0

Minor Changes

0.51.1

Patch Changes

0.51.0

Minor Changes

Patch Changes

  • Updated dependencies

0.50.0

Minor Changes

0.49.1

Patch Changes

0.49.0

Minor Changes

0.48.0

Minor Changes

0.47.1

Patch Changes

0.47.0

Minor Changes

Patch Changes

  • Updated dependencies

0.46.0

Minor Changes

Patch Changes

  • Updated dependencies

0.45.5

Patch Changes

0.45.4

Patch Changes

0.45.3

Patch Changes

0.45.2

Patch Changes

0.45.1

Patch Changes

  • Updated dependencies

0.45.0

Minor Changes

Patch Changes

0.44.1

Patch Changes

0.44.0

Minor Changes

0.43.0

Minor Changes

Patch Changes

  • Updated dependencies

0.42.1

Patch Changes

  • Updated dependencies

0.42.0

Minor Changes

0.41.0

Minor Changes

0.40.3

Patch Changes

0.40.2

Patch Changes

  • Updated dependencies

0.40.1

Patch Changes

0.40.0

Minor Changes

Patch Changes

0.39.1

Patch Changes

0.39.0

Minor Changes

0.38.0

Minor Changes

0.37.2

Patch Changes

0.37.1

Patch Changes

0.37.0

Minor Changes

0.36.0

Minor Changes

  • #137852, (opens new window) e484ea0d5c1e2, (opens new window) - The NavLogo component logo and mobileLogo props have changed to prevent invalid and inaccessible states.

    • logo now takes a component reference that matches @atlaskit/logo props instead of arbitrary JSX
    • mobileLogo has been renamed to icon and now takes a component reference that matches @atlaskit/logo props instead of arbitrary JSX

    Before

    <NavLogo href="/" logo={<AtlassianLogo label="Atlassian Design System" />} mobileLogo={<AtlassianIcon label="Atlassian Design System" appearance="brand" size="small" />} />

    After

    <NavLogo href="/" label="Atlassian Design System" icon={AtlassianLogo} mobileLogo={AtlassianIcon} />

0.35.0

Minor Changes

Patch Changes

0.34.2

Patch Changes

0.34.1

Patch Changes

0.34.0

Minor Changes

0.33.0

Minor Changes

Patch Changes

0.32.0

Minor Changes

0.31.0

Minor Changes

0.30.0

Minor Changes

0.29.1

Patch Changes

0.29.0

Minor Changes

Patch Changes

  • Updated dependencies

0.28.0

Minor Changes

Patch Changes

0.27.0

Minor Changes

0.26.0

Minor Changes

Patch Changes

0.25.4

Patch Changes

0.25.3

Patch Changes

0.25.2

Patch Changes

0.25.1

Patch Changes

0.25.0

Minor Changes

Patch Changes

0.24.0

Minor Changes

  • #127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

    This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

Patch Changes

  • Updated dependencies

0.23.1

Patch Changes

  • Updated dependencies

0.23.0

Minor Changes

Patch Changes

  • Updated dependencies

0.22.0

Minor Changes

0.21.0

Minor Changes

0.20.0

Minor Changes

0.19.0

Minor Changes

0.18.1

Patch Changes

0.18.0

Minor Changes

0.17.0

Minor Changes

Patch Changes

  • Updated dependencies

0.16.0

Minor Changes

  • #125606, (opens new window) 8faba4925ae98, (opens new window) - [ux] MenuItem's will now have elemBefore take up space by default in order to improve vertical alignment in the side navigation. You can opt out of this behaviour by using a special COLLAPSE_ELEM_BEFORE symbol as the argument for elemBefore.

    import { MenuLinkItem, COLLAPSE_ELEM_BEFORE } from '@atlaskit/navigation/side-nav/menu-link-item'; function Example() { return ( <MenuLinkItem elemBefore={COLLAPSE_ELEM_BEFORE} href="#"> Hi </MenuLinkItem> ); }

0.15.2

Patch Changes

0.15.1

Patch Changes

0.15.0

Minor Changes

0.14.1

Patch Changes

0.14.0

Minor Changes

0.13.0

Minor Changes

Patch Changes

0.12.0

Minor Changes

0.11.4

Patch Changes

0.11.3

Patch Changes

0.11.2

Patch Changes

0.11.1

Patch Changes

0.11.0

Minor Changes

0.10.0

Minor Changes

0.9.0

Minor Changes

0.8.2

Patch Changes

0.8.1

Patch Changes

0.8.0

Minor Changes

Patch Changes

0.7.0

Minor Changes

Patch Changes

  • Updated dependencies

0.6.1

Patch Changes

0.6.0

Minor Changes

0.5.2

Patch Changes

0.5.1

Patch Changes

0.5.0

Minor Changes

Patch Changes

0.4.4

Patch Changes

0.4.3

Patch Changes

0.4.2

Patch Changes

0.4.1

Patch Changes

0.4.0

Minor Changes

0.3.15

Patch Changes

0.3.14

Patch Changes

  • #116409, (opens new window) b9997b6e42dca, (opens new window) - The page layout root now forcibly hides direct child elements that aren't page layout components. Only page layout components that are placed onto the page layout grid are supported. An error message is logged during dev if you've rendered a non-page layout element as a child of the page layout root.
  • Updated dependencies

0.3.13

Patch Changes

  • Updated dependencies

0.3.12

Patch Changes

  • Updated dependencies

0.3.11

Patch Changes

0.3.10

Patch Changes

0.3.9

Patch Changes

0.3.8

Patch Changes

  • Updated dependencies

0.3.7

Patch Changes

0.3.6

Patch Changes

  • Updated dependencies

0.3.5

Patch Changes

0.3.4

Patch Changes

0.3.3

Patch Changes

  • Updated dependencies

0.3.2

Patch Changes

0.3.1

Patch Changes

0.3.0

Minor Changes

Patch Changes

0.2.2

Patch Changes

0.2.1

Patch Changes

0.2.0

Minor Changes

0.1.1

Patch Changes

0.1.0

Minor Changes

Patch Changes

  • Updated dependencies

0.0.6

Patch Changes

0.0.5

Patch Changes

  • Updated dependencies

0.0.4

Patch Changes

0.0.3

Patch Changes

0.0.2

Patch Changes

0.0.1

Patch Changes

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License