Router links

Link, Breadcrumb.Item, and Button with href render native anchors. Keep their href so copying a URL, opening a new tab, and navigation without JavaScript still work. A router click handler can intercept ordinary internal clicks.

This example uses React Router’s useHref and useLinkClickHandler:

import { Link, type LinkProps } from '@yarcl/react';
import { useHref, useLinkClickHandler, type To } from 'react-router';

type RouterLinkProps = Omit<LinkProps, 'href' | 'external'> & { to: To };

function RouterLink({ to, target, onClick, ...props }: RouterLinkProps) {
  const href = useHref(to);
  const handleClick = useLinkClickHandler(to, { target });

  return (
    <Link
      {...props}
      href={href}
      target={target}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) handleClick(event);
      }}
    />
  );
}

Use RouterLink for internal navigation and Link href="https://example.com" external for external destinations. The router handler handles modifier keys and non-default targets so those clicks retain normal anchor behavior.

Breadcrumbs

Breadcrumb.Item needs to stay inside Breadcrumb to receive its current-page state. Wrap the item itself with the same hooks:

import { Breadcrumb, type BreadcrumbItemProps } from '@yarcl/react';
import { useHref, useLinkClickHandler, type To } from 'react-router';

type RouterBreadcrumbItemProps = Omit<BreadcrumbItemProps, 'href'> & { to: To };

function RouterBreadcrumbItem({ to, target, onClick, ...props }: RouterBreadcrumbItemProps) {
  const href = useHref(to);
  const handleClick = useLinkClickHandler(to, { target });

  return (
    <Breadcrumb.Item
      {...props}
      href={href}
      target={target}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) handleClick(event);
      }}
    />
  );
}

<Breadcrumb>
  <RouterBreadcrumbItem to="/projects">Projects</RouterBreadcrumbItem>
  <Breadcrumb.Item>Current project</Breadcrumb.Item>
</Breadcrumb>

Button links

The same router hooks work with a button-shaped link:

import { Button, type ButtonLinkProps } from '@yarcl/react';
import { useHref, useLinkClickHandler, type To } from 'react-router';

type RouterButtonProps = Omit<ButtonLinkProps, 'href'> & { to: To };

function RouterButton({ to, target, onClick, ...props }: RouterButtonProps) {
  const href = useHref(to);
  const handleClick = useLinkClickHandler(to, { target });

  return (
    <Button
      {...props}
      href={href}
      target={target}
      onClick={(event) => {
        onClick?.(event);
        if (!event.defaultPrevented) handleClick(event);
      }}
    />
  );
}

<RouterButton to="/checkout">Enroll in the course</RouterButton>

IconButton also accepts href and anchor props when navigation uses an icon alone.

Menu actions

Menu.Item renders a button. Use it for actions, including navigation that happens after an action. A menu item can call the router in onSelect:

import { Menu } from '@yarcl/react';
import { useNavigate } from 'react-router';

function OpenSettingsItem() {
  const navigate = useNavigate();
  return <Menu.Item onSelect={() => navigate('/settings')}>Open settings</Menu.Item>;
}

For a destination that users should be able to copy or open in a new tab, use an anchor such as RouterLink or RouterButton.