OnLinkNavigationProvider is a React context provider to externally control the link behavior of components further down the tree.


Component props
  href: string,
  target?: null | "self" | "blank",
|}) => ?({|
  +event: SyntheticEvent<>,
|}) => void

If passed, it replaces the default link behavior with custom on navigation behavior. See custom navigation context variant for examples.


Components with links use simple <a> tags. In order to replace the default link behavior with custom ones (e.g. react-router), onNavigation provides an interface to pass external logic into the 'onClick' event handler in children links.

This example illustrates a custom navigation implementations to externally control the link functionality of Link: setting a default navigation logic with OnLinkNavigationProvider.

If onNavigation prop is passed to OnLinkNavigationProvider, it's passed down to all children links and sets a customized default link navigation behavior. onNavigation is a higher-order function: it takes named arguments: href and target and returns an event handler function. In the component's onClick event handler, the onClick prop gets called first, followed by the function passed down by the OnLinkNavigationProvider.

If onNavigation is a hook function, it can contain complex logic, including React hooks, to perform side effects.

In this example, the useOnNavigation hook function is passed to OnLinkNavigationProvider and executes the following actions:

  • Disable the default link behavior
  • Show an alert message
  • Open a different URL in a new window

The returned onNavigationClick function inside the hook function uses the event access to preventDefault(). It could also be used to stopPropagation().

Accessible links in Gestalt announce to assistive technologies that the link opens in a new tab. Always make sure your external logic aligns with the 'target' prop values. For example, if your external logic opens a url in a new tab, set 'target' to 'blank'. Localize the default label with DefaultLabelProvider. Learn more
Examples from start to end: Link, Button, IconButton, TapArea
Examples from top to bottom: Callout, Upsell, ActivationCard
With a Dropdown

Link / Button / IconButton / TapArea / DropDown / Callout / Upsell / ActivationCard
If these components are under a OnLinkNavigationProvider, their link behavior defaults to the logic defined in OnLinkNavigationProvider. In order to disable the onNavigation logic, we can return "dangerouslyDisableOnNavigation" in the onClick callback. See each component page for more information.

Component quality checklist

Component quality checklist
Quality item
Status description
Figma Library
Component is not currently available in Figma.
Responsive Web
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.