Skip to main content

Routing

latest

Arc components don't have any knowledge of routing implementations. The SiteHeaderV2, 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 {
  SiteHeaderV2,
  SiteHeaderV2NavItem,
  SiteHeaderV2ItemGroup,
  SiteHeaderV2Item,
  SiteHeaderV2SubNavItem,
  SiteHeaderV2Column
  } from '@arc-ui/components/SiteHeaderV2'
import { Image } from '@arc-ui/components/Image'
import { VerticalSpace } from '@arc-ui/components/VerticalSpace'
import { Text } from '@arc-ui/components/Text'
import { Heading } from '@arc-ui/components/Heading'
import { ButtonV2 } from '@arc-ui/components/ButtonV2'

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 (
    <SiteHeaderV2 hasLogin={false} logoOnClick={navigateToRoute(ROUTES.home)}>
      <SiteHeaderV2NavItem
        href={ROUTES.home}
        title="Home"
        onClick={navigateToRoute(ROUTES.home)}
      />
      <SiteHeaderV2NavItem
        href={ROUTES.cards}
        title="Cards"
        onClick={navigateToRoute(ROUTES.cards)}
      />
      <SiteHeaderV2NavItem
        href={ROUTES.formDemo}
        title="Forms"
        onClick={navigateToRoute(ROUTES.formDemo)}
      />
      <SiteHeaderV2NavItem
        href={ROUTES.orderTracker}
        title="Order tracker"
        onClick={navigateToRoute(ROUTES.orderTracker)}
      />
      <SiteHeaderV2NavItem
        href={ROUTES.home}
        title="Menu"
        onClick={navigateToRoute(ROUTES.home)}
      >
        <SiteHeaderV2ItemGroup
          title="Home"
          href={ROUTES.home}
          onClick={navigateToRoute(ROUTES.home)}
        >
          <SiteHeaderV2Item
            href={ROUTES.cards}
            onClick={navigateToRoute(ROUTES.cards)}
          >
            Cards
          </SiteHeaderV2Item>
          <SiteHeaderV2Item
            href={ROUTES.formDemo}
            onClick={navigateToRoute(ROUTES.formDemo)}
          >
            Forms
          </SiteHeaderV2Item>
        </SiteHeaderV2ItemGroup>
      </SiteHeaderV2NavItem>
      <SiteHeaderV2NavItemWithSubNav
        title="Submenu"
        subTitle="Demo submenu"
        href={ROUTES.home}
        viewAllTitle="This just goes to home"
        onViewAllClick={navigateToRoute(ROUTES.home)}
        slot1={
          <SiteHeaderV2SubNavItem
            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" />
                <ButtonV2 label="Call to action" />
              </div>
            }
          >
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 1 col 1"
                href={ROUTES.home}
                onClick={navigateToRoute(ROUTES.home)}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 1 col 2"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 1 col 3"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
              <SiteHeaderV2ItemGroup
                title="Menu 1 col 4"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
          </SiteHeaderV2SubNavItem>
        }
        slot2={
          <SiteHeaderV2SubNavItem
            title="Submenu 2"
            subTitle="Submenu 2 subtile"
            href="/products/public-sector"
            viewAllTitle="This links to cards"
            onClick={navigateToRoute(ROUTES.cards)}
          >
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 2 col 1"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 2 col 2"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 2 col 3"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
              <SiteHeaderV2ItemGroup
                title="Menu 2 col 4"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
          </SiteHeaderV2SubNavItem>
        }
        slot3={
          <SiteHeaderV2SubNavItem
            title="Submenu 3"
            subTitle="Submenu 3 subtile"
            href="/products/public-sector"
            offsetXL="24"
            viewAllTitle="This links to cards"
            onClick={navigateToRoute(ROUTES.cards)}
          >
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 3 col 1"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 3 col 2"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
            <SiteHeaderV2Column>
              <SiteHeaderV2ItemGroup
                title="Menu 3 col 3"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
              <SiteHeaderV2ItemGroup
                title="Menu 3 col 4"
                onClick={navigateToRoute(ROUTES.home)}
                href={ROUTES.home}
              >
                <SiteHeaderV2Item
                  href={ROUTES.home}
                  onClick={navigateToRoute(ROUTES.home)}
                >
                  Home
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.cards}
                  onClick={navigateToRoute(ROUTES.cards)}
                >
                  Cards
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.formDemo}
                  onClick={navigateToRoute(ROUTES.formDemo)}
                >
                  Forms
                </SiteHeaderV2Item>
                <SiteHeaderV2Item
                  href={ROUTES.orderTracker}
                  onClick={navigateToRoute(ROUTES.orderTracker)}
                >
                  Order tracker
                </SiteHeaderV2Item>
              </SiteHeaderV2ItemGroup>
            </SiteHeaderV2Column>
          </SiteHeaderV2SubNavItem>
        }
      />
    </SiteHeader>
  );
};
import { FC } from "react";
import { SiteFooter, SiteFooterItem } from "@arc-ui/components/SiteFooter";
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>
      <SiteFooterItem
        onClick={navigateToRoute(ROUTES.home)}
        href={ROUTES.home}
      >
        Home
      </SiteFooterItem>
      <SiteFooterItem
        onClick={navigateToRoute(ROUTES.cards)}
        href={ROUTES.cards}
      >
        Cards
      </SiteFooterItem>
      <SiteFooterItem
        onClick={navigateToRoute(ROUTES.formDemo)}
        href={ROUTES.formDemo}
      >
        Form demo
      </SiteFooterItem>
      <SiteFooterItem
        onClick={navigateToRoute(ROUTES.orderTracker)}
        href={ROUTES.orderTracker}
      >
        Order tracker
      </SiteFooterItem>
    </SiteFooter>
  );
};

Cards​

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

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

  return (
    <MediaCard
      heading="Card Title"
      text="Card content"
      buttonIcon="arrow"
      url="/"
      media={{
        type: "img",
        src: "https://res.cloudinary.com/measured/image/upload/f_auto,q_auto,w_1368/v1616502502/BT/20780_vx13vc.jpg",
        alt: "BT Tower",
      }}
      onClick={navigateHome}
    />
  );
};

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,
  BreadcrumbsItem,
  BreadcrumbsLink,
} from "@arc-ui/components/Breadcrumbs";

import { Link } from "next/link";

export const BreadcrumbsExample = () => {
  return (
    <Breadcrumbs>
      <BreadcrumbsItem>
        <Link href="/" passHref>
          <BreadcrumbsLink>Home</BreadcrumbsLink>
        </Link>
      </BreadcrumbsItem>
      <BreadcrumbsItem>
        <Link href="/order-tracker" passHref>
          <BreadcrumbsLink>Order Tracker</BreadcrumbsLink>
        </Link>
      </BreadcrumbsItem>
      <BreadcrumbsItem>
        <Link href="/BT Halo for business" passHref>
          <BreadcrumbsLink>Breadcrumbs</BreadcrumbsLink>
        </Link>
      </BreadcrumbsItem>
    </Breadcrumbs>
  );
};

React Router

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

export const BreadcrumbsExample = () => {
  return (
    <Breadcrumbs>
      <BreadcrumbsItem>
        <BreadcrumbsLink>
          <Link to="/">Home</Link>
        </BreadcrumbsLink>
      </BreadcrumbsItem>
      <BreadcrumbsItem>
        <BreadcrumbsLink>
          <Link to="/order-tracker">Order Tracker</Link>
        </BreadcrumbsLink>
      </BreadcrumbsItem>
      <BreadcrumbsItem>
        <BreadcrumbsLink>BT Halo for business</BreadcrumbsLink>
      </BreadcrumbsItem>
    </Breadcrumbs>
  );
};