NewYour coding agent can read the release notes before it upgrades.Set up the MCP server →
npm
A horizontal navigation component for Atlassian apps.
Last release 4 days ago
17 Sep 2026
Ships fairly regularly
a new release about every 2 weeks
Nearly every release is documented
notes for 60 of the last 60 stable releases
63 versions withdrawn
withdrawn after publishing
7 years old
293 releases · first in 2019
### Patch Changes - #35385 `967dd926bfc` - Updates all navigation components to use border/shape tokens. This is a no-op as these tokens are not enabl
967dd926bfc - Updates
all navigation components to use border/shape tokens. This is a no-op as these tokens are not
enabled in product.### Patch Changes - #34580 `fe65eb90595` - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour cha
fe65eb90595 - Internal
change to enforce token usage for spacing properties. There is no expected visual or behaviour
change.One column per quarter.
### Patch Changes - Updated dependencies
### Patch Changes - Updated dependencies
### Patch Changes - Updated dependencies
### Patch Changes - #34887 `9eec8b31eaf` - [ux] Change reverts a previous change to the focus border highlight color on focus for quick search in conf
9eec8b31eaf - [ux]
Change reverts a previous change to the focus border highlight color on focus for quick search in
confluence### Patch Changes - #33652 `e7ea6832ad2` - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration w
e7ea6832ad2 - Bans the
use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration
work. The change is internal only and should not introduce any changes for the component
consumers.### Minor Changes - #33679 `e40a555bd64` - [ux] Adds a platform-feature-flagged update to the way the top nav renders primary nav items, moving it fro
e40a555bd64 - [ux]
Adds a platform-feature-flagged update to the way the top nav renders primary nav items, moving it
from unperformant JS-based calculations to a responsive CSS solution. PFF:
"platform.design-system-team.navigation-v2-no-jank_5yhbd"### Patch Changes - #33793 `9d00501a414` - Ensure legacy types are published for TS 4.5-4.8
9d00501a414 - Ensure
legacy types are published for TS 4.5-4.8### Patch Changes - #33649 `41fae2c6f68` - Upgrade Typescript from 4.5.5 to 4.9.5
41fae2c6f68 - Upgrade
Typescript from 4.5.5 to 4.9.5### Minor Changes - #33258 `56507598609` - Skip minor dependency bump ### Patch Changes - Updated dependencies
### Patch Changes - #32173 `f7f852b0a4f` - Migrated use of gridSize to space tokens where possible. There is no expected visual or behaviour change.
f7f852b0a4f - Migrated
use of gridSize to space tokens where possible. There is no expected visual or behaviour change.### Minor Changes - #31299 `e3fa4437cf5` - [ux] Updates focus appearance of components using buttons and custom buttons. These states now use an offse
e3fa4437cf5 - [ux]
Updates focus appearance of components using buttons and custom buttons. These states now use an
offset outline which is consistent with other applications of focus in Atlassian components.### Patch Changes - #27634 `718d5ad3044` - Updates to support the new @atlaskit/tokens theming API. - Updated dependencies
718d5ad3044 - Updates
to support the new @atlaskit/tokens theming API.### Patch Changes - #28090 `cdc1dd169be` - [ux] When updating tokens for Search component of atlassian-navigation package we found that some styles do
cdc1dd169be - [ux]
When updating tokens for Search component of atlassian-navigation package we found that some
styles don't apply. This is due to the fact that some dynamic styles for hover and focus
states used to be passed via style attribute. style attribute doesn't allow usage of
pseudo-classes hens styles were never applied. We fixed this and made tokens follow the spec.
However, to prevent consumer's VR tests from breaking we decided to fallback on default styles so
the UI on legacy theming unchanged.### Patch Changes - Updated dependencies
### Patch Changes - Updated dependencies
### Patch Changes - Updated dependencies
### Minor Changes - #25860 `27fc68c8e36` - Updates @emotion/core to @emotion/react; v10 to v11. There is no expected behavior change. ### Patch Change
27fc68c8e36 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.### Patch Changes - #26449 `fc570a62923` - [ux] Fixed a regression which could prevent items from collapsing.
fc570a62923 - [ux]
Fixed a regression which could prevent items from collapsing.### Patch Changes - #24874 `8cc2f888c83` - Upgrade Typescript from 4.3.5 to 4.5.5
8cc2f888c83 - Upgrade
Typescript from 4.3.5 to 4.5.5### Patch Changes - #24632 `eb77cae1ea4` - [ux] Selected buttons that have menus in the atlassian-navigation component now show the correct background
eb77cae1ea4 - [ux]
Selected buttons that have menus in the atlassian-navigation component now show the correct
background color when "selected"### Patch Changes - #24492 `8d4228767b0` - Upgrade Typescript from 4.2.4 to 4.3.5.
8d4228767b0 - Upgrade
Typescript from 4.2.4 to 4.3.5.### Patch Changes - #23381 `95c1a5e91d1` - Internal code change turning on new linting rules. - Updated dependencies
95c1a5e91d1 - Internal
code change turning on new linting rules.### Patch Changes - #23676 `deeaf03eb21` - Fix an issue where ProductHome rendered incorrectly in Safari
deeaf03eb21 - Fix an
issue where ProductHome rendered incorrectly in Safari### Patch Changes - #22642 `416570be6bf` - Small update to styles to account for change in @atlaskit/logo. - Updated dependencies
416570be6bf - Small
update to styles to account for change in @atlaskit/logo.`dd991482e67` - [ux] Fixed a regression causing the logoMaxWidth prop to have no effect. VR tests may need regenerating, but in most cases will not.
5b7962fbceb - Fix
visual bug with selected state of navigation iconButtonsdd991482e67 - [ux]
Fixed a regression causing the logoMaxWidth prop to have no effect. VR tests may need
regenerating, but in most cases will not.### Patch Changes - #21553 `d28c3b5078e` - Updated type documentation
d28c3b5078e - Updated
type documentation### Patch Changes - Updated dependencies
### Minor Changes - #20721 `81addc0c144` - [ux] Pass boxShadow for the focus styling of search section in the theme generator. ### Patch Changes - Upd
81addc0c144 - [ux]
Pass boxShadow for the focus styling of search section in the theme generator.### Patch Changes - #21440 `3622df604ee` - Fixes bug where navigation items cannot be added after intial render if the initial item array was empty
3622df604ee - Fixes
bug where navigation items cannot be added after intial render if the initial item array was empty### Patch Changes - #20650 `cb2392f6d33` - Upgrade to TypeScript 4.2.4 - Updated dependencies
cb2392f6d33 - Upgrade
to TypeScript 4.2.4### Patch Changes - Updated dependencies
### Patch Changes - #20174 `5772d2d059c` - update root babel config to correctly compile atlassian switcher
5772d2d059c - update
root babel config to correctly compile atlassian switcher`62edf20ab1e` - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no
ac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changes62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.### Patch Changes - #19019 `faee2b4ee52` - Rewrite dynamic styles to be static to aid compiled migration. - Updated dependencies
faee2b4ee52 - Rewrite
dynamic styles to be static to aid compiled migration.### Minor Changes - #18526 `c4e94b64308` - Added a new href prop to the Create button which causes it to be rendered as a link. This is suitable for w
c4e94b64308 - Added a
new href prop to the Create button which causes it to be rendered as a link. This is suitable for
when the Create action is handled as a full page rather than in a modal-dialog.### Patch Changes - #16752 `19d72473dfb` - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing
19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.### Patch Changes - Updated dependencies
### Patch Changes - #17053 `9dd6250db15` - Updates token value for selected button text. Button text should now be "blue" when selected
9dd6250db15 - Updates
token value for selected button text. Button text should now be "blue" when selected### Patch Changes - #17475 `c55c736ecea` - Patch VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489
c55c736ecea - Patch
VULN AFP-3486 AFP-3487 AFP-3488 AFP-3489What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise e
#14810
47f58da5946 -
ED-13322, ED-13324, ED-13326, ED-13323, ED-13204: Upgrade and support react-intl@^5.18.1 including
breaking API changes, types and tests in atlassian-frontend packages
What changed: Upgraded our react-intl support from ^2.6.0 to ^5.18.1. This means editor packages now rely on consumers installing ^5.18.1, otherwise editor usage of react-intl will mismatch with actual installed react-intl APIs. Why change was made: As part of a coordinated upgrade effort across AF packages, as react-intl v2 is quite dated. How consumer should update their code: Ensure react-intl ^5.18.1 is installed in consuming applications.
Upgrade guide: To consume atlassian-frontend packages that use react-intl5 setup a second provider for the new version, using an npm alias
"react-intl": "^2.6.0",
"react-intl-next": "npm:react-intl@^5.18.1",
import { IntlProvider } from 'react-intl';
import { IntlProvider as IntlNextProvider } from 'react-intl-next';
return (
<IntlProvider
key={locale}
data-test-language={locale}
locale={locale}
defaultLocale={DEFAULT_LOCALE}
messages={messages}
>
<IntlNextProvider
key={locale}
data-test-language={locale}
locale={locale}
defaultLocale={DEFAULT_LOCALE}
messages={messages}
>
{children}
</IntlNextProvider>
</IntlProvider>
);
### Minor Changes - #16411 `9d4ca6e23da` - [ux] New create-dropdown-menu package for Create dropdown button
9d4ca6e23da - [ux] New
create-dropdown-menu package for Create dropdown buttonensure-design-token-usage now covers:
#15998
a2f953f3814 -
Previously the ensure-design-token-usage eslint rule contained all checks relating to token use.
This has now been split up into two separate rules:
ensure-design-token-usage now covers:
legacyElevation — warns about old usages of the elevation mixins or styles, which instead
should use the card or overlay tokens.hardCodedColor — warns about use of hard-coded colors such as color: colors.B100, which
instead should be wrapped in a token() call. This covers the majority of cases in existing
codebases when first adopting tokens.no-unsafe-design-token-usage (new) covers the remaining rules:
directTokenUsage — warns against using the CSS Custom Property name that is output in the
browser by the token() call. Eg. directly using var(--ds-accent-subtleBlue) is bad.staticToken — warns when tokens aren't used inline. Inlining the token usages helps with
static analysis, which unlocks future improvements. Eg. pulling the token out into a const like
css={ color: token(primaryButtonText) } is bad.invalidToken — warns when using a token that doesn't exist (not one that's been renamed, see
the next point).tokenRenamed — warns when using a token that's been renamed in a subsequent release.tokenFallbackEnforced — warns if a fallback for the token call is not provided. Eg. call with
the fallback like this token('color.background.disabled', N10) instead of
token('color.background.disabled').tokenFallbackRestricted — the opposite of tokenFallbackEnforced. Eg. do not pass in a
fallback like this token('color.background.disabled', N10) and instead only include the token
token('color.background.disabled').Upgrading — some instances of \\eslint-disable may need to be changed to the new rule. If you
have failing lint rules after only bumping this package then switch those ignores to use
no-unsafe-design-token-usage instead.
22fb31312eb - Fixes
unmounted component state update warnings for AtlassianNavigation
f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.
Updated dependencies
### Patch Changes - #16287 `bb54a699e54` - [ux] Fixes a bug where a previously removed gradient positioned ::after primary actions was still rendered.
bb54a699e54 - [ux]
Fixes a bug where a previously removed gradient positioned ::after primary actions was still
rendered. Also fixes a bug where this gradient rendered incorrectly on Safari.Legacy dark mode users should expect no visual or breaking changes.
#14777
c9986657899 -
Instrumented atlassian-navigation with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
f791fab1bfa - Added
missing components and onBlur props to the props type used by secondary actions. These were
already available but were not documented.### Patch Changes - #14319 `4f9dd11a8eb` - Fixes a visual bug which made the logo appear twice under very rare circumstances - Updated dependencies
4f9dd11a8eb - Fixes a
visual bug which made the logo appear twice under very rare circumstances### Patch Changes - #14381 `789bc630b95` - Moved switcher test utils to private scope.
789bc630b95 - Moved
switcher test utils to private scope.### Patch Changes - #13965 `1a68f990792` - ACT-2057 transition @atlaskit/atlassian-switcher-vanilla & @atlaskit/atlassian-switcher to private scope
1a68f990792 - ACT-2057
transition @atlaskit/atlassian-switcher-vanilla & @atlaskit/atlassian-switcher to private scope`956eeeed790` - [ux] Styles for the product icon and logo have been slightly refactored.
e1bac029e02 - [ux]
Added notification badge to the Help button956eeeed790 - [ux]
Styles for the product icon and logo have been slightly refactored.88a19402c24 - Updates
to internal tests.### Major Changes - #10609 `68c25f52345` - This 1.0.0 release denotes that the package API is now stable and is no longer in developer preview. There
68c25f52345 - This
1.0.0 release denotes that the package API is now stable and is no longer in developer preview.
There are NO API CHANGES in this release.### Patch Changes - Updated dependencies
### Patch Changes - #6842 `95771438ed` - [ux] PrimaryItems will now overflow/resize correctly when the initial load screen size is narrower than the i
95771438ed - [ux]
PrimaryItems will now overflow/resize correctly when the initial load screen size is narrower than
the items it contains### Patch Changes - #5857 `d3265f19be` - Transpile packages using babel rather than tsc
d3265f19be - Transpile
packages using babel rather than tsc### Patch Changes - #6228 `cadfec2b52` - [ux] Introduced a new prop value in search field so that user can control it from outside and can change the
cadfec2b52 - [ux]
Introduced a new prop value in search field so that user can control it from outside and can
change the value of search field.### Patch Changes - #5497 `5f58283e1f` - Export types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules compiler o
5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.### Patch Changes - #5344 `9798ad1405` - Remove deep import paths of dependencies in TS declaration files - Updated dependencies
9798ad1405 - Remove
deep import paths of dependencies in TS declaration files### Minor Changes - #4749 `ac92cbbca8` - Replaced WidthDetector with WidthObserver. We are doing this change because WidthDetector was causing some pe
ac92cbbca8 - Replaced
WidthDetector with WidthObserver. We are doing this change because WidthDetector was causing some
performance issue.### Patch Changes - Updated dependencies
### Patch Changes - #4547 `9f54ca0cf1` - Adds maxwidth of 260px to logo in @atlaskit/atlassian-navigation and adds new prop logoMaxWidth to make maxWi
9f54ca0cf1 - Adds
maxwidth of 260px to logo in @atlaskit/atlassian-navigation and adds new prop logoMaxWidth to make
maxWidth for logo user driven.Your coding agent can read these notes before it upgrades. Set up the MCP server →