Skip to main content

Routing

latest

Arc components don't have any knowledge of routing implementations. The SiteHeader, SiteFooter and Card components can support routing via click handlers. Inside these handlers you can use the router your using in your app programmatically. The following examples are using Next.

caution

There is a known issue with the state of the menus and submenus using this approach. After navigating the menu will close, but the menu will be in the state it was previously when re-opened. This will be addressed in future versions of this component. This issue only occurs when the header is used with client-side routers.

import { FC } from "react";
import {
  SiteHeader,
  Image,
  VerticalSpace,
  Text,
  Heading,
  Button
} from "@arc-ui/components";
import { useRouter } from "next/router";

export const DemoHeader: FC = () => {
  const router = useRouter();

  const ROUTES = {
    home: "/",
    cards: "/cards",
    formDemo: "/form-demo",
    orderTracker: "/order-tracker"
  } as const;

  const navigateToRoute = (route: typeof ROUTES[keyof typeof ROUTES]) => () => {
    router.push(route);
  };

  return (
    <SiteHeader hasLogin={false} logoOnClick={navigateToRoute(ROUTES.home)}>
      <SiteHeader.NavItem
        href={ROUTES.home}
        title="Home"
        onClick={navigateToRoute(ROUTES.home)}
      />
      <SiteHeader.NavItem
        href={ROUTES.cards}
        title="Cards"
        onClick={navigateToRoute(ROUTES.cards)}
      />
      <SiteHeader.NavItem
        href={ROUTES.formDemo}
        title="Forms"
        onClick={navigateToRoute(ROUTES.formDemo)}
      />
      <SiteHeader.NavItem
        href={ROUTES.orderTracker}
        title="Order tracker"
        onClick={navigateToRoute(ROUTES.orderTracker)}
      />
      <SiteHeader.NavItem
        href={ROUTES.home}
        title="Menu"
        onClick={navigateToRoute(ROUTES.home)}
      >
        <SiteHeader.ItemGroup
          title="Home"
          href={ROUTES.home}
          onClick={navigateToRoute(ROUTES.home)}
        >
          <SiteHeader.Item
            href={ROUTES.cards}
            onClick={navigateToRoute(ROUTES.cards)}
          >
            Cards
          </SiteHeader.Item>
          <SiteHeader.Item
            href={ROUTES.formDemo}
            onClick={navigateToRoute(ROUTES.formDemo)}
          >
            Forms
          </SiteHeader.Item>
        </SiteHeader.ItemGroup>
      </SiteHeader.NavItem>
      <SiteHeader.NavItemWithSubNav
        title="Submenu"
        subTitle="Demo submenu"
        href={ROUTES.home}
        viewAllTitle="This just goes to home"
        onViewAllClick={navigateToRoute(ROUTES.home)}
        slot1={
          <SiteHeader.SubNavItem
            title="Submenu 1"
            subTitle="Submenu 1 subtile"
            href="/cards"
            onClick={navigateToRoute(ROUTES.cards)}
            viewAllTitle="This links to cards"
            promo={
              <div style={{ maxWidth: 280 }}>
                <Image
                  fit="cover"
                  src="https://res.cloudinary.com/measured/image/upload/f_auto,q_auto,w_560/v1616502511/BT/20784_tywqio.jpg"
                />
                <VerticalSpace size="12" />
                <Text size="xs" tone="supporting">
                  EYEBROW
                </Text>
                <Heading size="s">Example sub nav promo</Heading>
                <VerticalSpace size="12" />
                <Button label="Call to action" />
              </div>
            }
          >
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 1 col 1"
                href={ROUTES.home}
                onClick={navigateToRoute(ROUTES.home)}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 1 col 2"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 1 col 3"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
              <SiteHeader.ItemGroup
                title="Menu 1 col 4"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
          </SiteHeader.SubNavItem>
        }
        slot2={
          <SiteHeader.SubNavItem
            title="Submenu 2"
            subTitle="Submenu 2 subtile"
            href="/products/public-sector"
            viewAllTitle="This links to cards"
            onClick={navigateToRoute(ROUTES.cards)}
          >
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 2 col 1"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 2 col 2"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 2 col 3"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
              <SiteHeader.ItemGroup
                title="Menu 2 col 4"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
          </SiteHeader.SubNavItem>
        }
        slot3={
          <SiteHeader.SubNavItem
            title="Submenu 3"
            subTitle="Submenu 3 subtile"
            href="/products/public-sector"
            offsetXL="24"
            viewAllTitle="This links to cards"
            onClick={navigateToRoute(ROUTES.cards)}
          >
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 3 col 1"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 3 col 2"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
            <SiteHeader.Column>
              <SiteHeader.ItemGroup
                title="Menu 3 col 3"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
              <SiteHeader.ItemGroup
                title="Menu 3 col 4"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeader.Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeader.Item>
                <SiteHeader.Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeader.Item>
              </SiteHeader.ItemGroup>
            </SiteHeader.Column>
          </SiteHeader.SubNavItem>
        }
      />
    </SiteHeader>
  );
};
import { FC } from "react";
import { SiteFooter } from "@arc-ui/components";
import { useRouter } from "next/router";

export const DemoFooter: FC = () => {
  const router = useRouter();

  const ROUTES = {
    home: "/",
    cards: "/cards",
    formDemo: "/form-demo",
    orderTracker: "/order-tracker"
  } as const;

  const navigateToRoute = (route: typeof ROUTES[keyof typeof ROUTES]) => () => {
    router.push(route);
  };

  return (
    <SiteFooter curve={false}>
      <SiteFooter.Item
        onClick={navigateToRoute(ROUTES.home)}
        href={ROUTES.home}
      >
        Home
      </SiteFooter.Item>
      <SiteFooter.Item
        onClick={navigateToRoute(ROUTES.cards)}
        href={ROUTES.cards}
      >
        Cards
      </SiteFooter.Item>
      <SiteFooter.Item
        onClick={navigateToRoute(ROUTES.formDemo)}
        href={ROUTES.formDemo}
      >
        Form demo
      </SiteFooter.Item>
      <SiteFooter.Item
        onClick={navigateToRoute(ROUTES.orderTracker)}
        href={ROUTES.orderTracker}
      >
        Order tracker
      </SiteFooter.Item>
    </SiteFooter>
  );
};

Cards​

import { Card } from "@arc-ui/components";
import { useRouter } from "next/router";

const Cards = () => {
  const router = useRouter();
  const navigateHome = () => router.push("/");

  return (
    <Card
      onClick={navigateHome}
      title="Card Title"
      actionLabel="Button"
      href="/"
      imageLoading="lazy"
      imageSrc="https://res.cloudinary.com/measured/image/upload/f_auto,q_auto,w_1368/v1616502502/BT/20780_vx13vc.jpg"
      imageAlt="BT Tower"
    >
      Card content
    </Card>
  );
};

Arc Breadcrumbs are composable and allow Next/Router Links to be wrapped or nested. Below are useage examples of Breadcrumbs in a Next and React App.

Next Router

import { Breadcrumbs } from "@arc-ui/components";
import { Link } from "next/link";

  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>
        <Link href="/" passHref>
          <Breadcrumbs.Link>Home</Breadcrumbs.Link>
        </Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Link href="/order-tracker" passHref>
          <Breadcrumbs.Link>Order Tracker</Breadcrumbs.Link>
        </Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Link href="/BT Halo for business" passHref>
          <Breadcrumbs.Link>Breadcrumbs</Breadcrumbs.Link>
        </Link>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

React Router

import { Breadcrumbs } from "@arc-ui/components";
import Link from "react-router-dom";

  return (
    <Breadcrumbs>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>
          <Link to="/">Home</Link>
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>
          <Link to="/order-tracker">Order Tracker</Link>
        </Breadcrumbs.Link>
      </Breadcrumbs.Item>
      <Breadcrumbs.Item>
        <Breadcrumbs.Link>BT Halo for business</Breadcrumbs.Link>
      </Breadcrumbs.Item>
    </Breadcrumbs>
  );
};