Breadcrumbs

A breadcrumbs component that wraps around links or text to help orient the user within the application.

children

<Link href="">Home</Link>
<Link href="">Tenants</Link>

<Link href="">Home</Link>
<Link href="">Tenants</Link>

import * as React from "react";
import {
  Breadcrumbs,
  Link,
  Text
} from "@nulogy/components";

export default () => {
  return (
    <Breadcrumbs>
      <Link href="">Home</Link>
      <Link href="">Tenants</Link>
    </Breadcrumbs>
  );
}

import * as React from "react";
import {
  Breadcrumbs,
  Link,
  Text
} from "@nulogy/components";

export default () => {
  return (
    <Breadcrumbs>
      <Link href="">Home</Link>
      <Link href="">Tenants</Link>
    </Breadcrumbs>
  );
}

Using with React-Router

The Breadcrumbs component can be used with React Router by using the as prop.

import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
import { Breadcrumbs, Link } from "@nulogy/components";
export const WithReactRouter = () => (
  <BrowserRouter>
    <Breadcrumbs>
      <Link as={ReactRouterLink} to="/">
        Home
      </Link>
      <Link as={ReactRouterLink} to="/Tenants">
        Tenants
      </Link>
    </Breadcrumbs>
  </BrowserRouter>
);

Props

Name	Type	Default	Description
children	react node		The elements to build the breadcrumbs out of. Can be a Link or Text.
as	string	nav	The dom element that wraps the breadcrumbs.