diff --git a/src/__tests__/__snapshots__/index.test.ts.snap b/src/__tests__/__snapshots__/index.test.ts.snap
index 78ac353c..d2eafa92 100644
--- a/src/__tests__/__snapshots__/index.test.ts.snap
+++ b/src/__tests__/__snapshots__/index.test.ts.snap
@@ -11,9 +11,15 @@ Object {
   },
   "Breadcrumb": Object {
     "$$typeof": Symbol(react.forward_ref),
+    "Item": Object {
+      "$$typeof": Symbol(react.forward_ref),
+      "defaultProps": Object {
+        "as": "a",
+      },
+      "render": [Function],
+    },
     "defaultProps": Object {
-      "as": "a",
-      "items": Array [],
+      "as": "nav",
     },
     "render": [Function],
   },
diff --git a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
index 444b048f..ee5316e0 100644
--- a/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
+++ b/src/components/breadcrumb/__tests__/__snapshots__/breadcrumb.test.tsx.snap
@@ -5,18 +5,14 @@ exports[`Breadcrumb component should be a Breadcrumb 1`] = `
   className="breadcrumb"
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="/"
       >
         Home
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="/section"
       >
@@ -36,60 +32,6 @@ exports[`Breadcrumb component should be a Breadcrumb 1`] = `
 </nav>
 `;
 
-exports[`Breadcrumb component should not pass along item.url as hrefAttr prop on 'as' component when hrefAttr is not supplied 1`] = `
-<nav
-  className="breadcrumb"
->
-  <ul>
-    <li
-      className=""
-    >
-      <div />
-    </li>
-    <li
-      className=""
-    >
-      <div />
-    </li>
-    <li
-      className="is-active"
-    >
-      <div />
-    </li>
-  </ul>
-</nav>
-`;
-
-exports[`Breadcrumb component should pass along item.url as hrefAttr prop on 'as' component when hrefAttr is supplied 1`] = `
-<nav
-  className="breadcrumb"
->
-  <ul>
-    <li
-      className=""
-    >
-      <div>
-        #1
-      </div>
-    </li>
-    <li
-      className=""
-    >
-      <div>
-        #2
-      </div>
-    </li>
-    <li
-      className="is-active"
-    >
-      <div>
-        #3
-      </div>
-    </li>
-  </ul>
-</nav>
-`;
-
 exports[`Breadcrumb component should use inline style and custom size 1`] = `
 <nav
   className="breadcrumb is-large"
@@ -100,18 +42,14 @@ exports[`Breadcrumb component should use inline style and custom size 1`] = `
   }
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="/"
       >
         Home
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="/section"
       >
@@ -136,18 +74,14 @@ exports[`Breadcrumb component should use separator arrow 1`] = `
   className="breadcrumb has-arrow-separator"
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#1"
       >
         Storybook
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#2"
       >
@@ -172,18 +106,14 @@ exports[`Breadcrumb component should use separator bullet 1`] = `
   className="breadcrumb has-bullet-separator"
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#1"
       >
         Storybook
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#2"
       >
@@ -208,18 +138,14 @@ exports[`Breadcrumb component should use separator dot 1`] = `
   className="breadcrumb has-dot-separator"
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#1"
       >
         Storybook
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#2"
       >
@@ -239,23 +165,19 @@ exports[`Breadcrumb component should use separator dot 1`] = `
 </nav>
 `;
 
-exports[`Breadcrumb component should use separator null 1`] = `
+exports[`Breadcrumb component should use separator succeeds 1`] = `
 <nav
-  className="breadcrumb"
+  className="breadcrumb has-succeeds-separator"
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#1"
       >
         Storybook
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#2"
       >
@@ -275,23 +197,19 @@ exports[`Breadcrumb component should use separator null 1`] = `
 </nav>
 `;
 
-exports[`Breadcrumb component should use separator succeeds 1`] = `
+exports[`Breadcrumb component should use separator undefined 1`] = `
 <nav
-  className="breadcrumb has-succeeds-separator"
+  className="breadcrumb"
 >
   <ul>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#1"
       >
         Storybook
       </a>
     </li>
-    <li
-      className=""
-    >
+    <li>
       <a
         href="#2"
       >
diff --git a/src/components/breadcrumb/__tests__/breadcrumb.test.tsx b/src/components/breadcrumb/__tests__/breadcrumb.test.tsx
index cff41983..20a9505c 100644
--- a/src/components/breadcrumb/__tests__/breadcrumb.test.tsx
+++ b/src/components/breadcrumb/__tests__/breadcrumb.test.tsx
@@ -1,91 +1,40 @@
 import React from "react";
 import renderer from "react-test-renderer";
 
-import { Breadcrumb, BreadcrumbProps } from "../breadcrumb";
+import { Breadcrumb, BREADCRUMB_SEPARATORS } from "../breadcrumb";
 
 describe("Breadcrumb component", () => {
   it("should be a Breadcrumb", () => {
     const component = renderer.create(
-      <Breadcrumb
-        items={[
-          {
-            name: "Home",
-            url: "/",
-          },
-          {
-            name: "Section",
-            url: "/section",
-          },
-          {
-            active: true,
-            name: "Details",
-            url: "/detail",
-          },
-        ]}
-      />,
+      <Breadcrumb>
+        {[
+          { href: "/", name: "Home" },
+          { href: "/section", name: "Section" },
+          { active: true, href: "/detail", name: "Details" },
+        ].map(({ active, href, name }, i) => (
+          <Breadcrumb.Item active={active} href={href} key={i}>
+            {name}
+          </Breadcrumb.Item>
+        ))}
+      </Breadcrumb>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
 
-  [undefined, "identifier"].map(hrefAttr =>
-    it(`should ${
-      hrefAttr ? "" : "not "
-    }pass along item.url as hrefAttr prop on 'as' component when hrefAttr is ${
-      hrefAttr ? "" : "not "
-    }supplied`, () => {
-      interface CustomProps {
-        identifier?: string;
-      }
-      const Custom: React.FC<CustomProps> = ({ identifier }) => (
-        <div>{identifier}</div>
-      );
-
-      const component = renderer.create(
-        <Breadcrumb<typeof Custom>
-          as={Custom}
-          hrefAttr={hrefAttr}
-          items={[
-            {
-              name: "Storybook",
-              url: "#1",
-            },
-            {
-              name: "Breadcrumb",
-              url: "#2",
-            },
-            {
-              active: true,
-              name: "Breadcrumb Types",
-              url: "#3",
-            },
-          ]}
-        />,
-      );
-      expect(component.toJSON()).toMatchSnapshot();
-    }),
-  );
-
-  [null, "arrow", "dot", "bullet", "succeeds"].map(separator =>
+  [undefined, ...BREADCRUMB_SEPARATORS].map(separator =>
     it(`should use separator ${separator}`, () => {
       const component = renderer.create(
-        <Breadcrumb
-          separator={separator as BreadcrumbProps["separator"]}
-          items={[
-            {
-              name: "Storybook",
-              url: "#1",
-            },
-            {
-              name: "Breadcrumb",
-              url: "#2",
-            },
-            {
-              active: true,
-              name: "Breadcrumb Types",
-              url: "#3",
-            },
-          ]}
-        />,
+        <Breadcrumb separator={separator}>
+          {[
+            { href: "#1", name: "Storybook" },
+            { href: "#2", name: "Breadcrumb" },
+            { active: true, href: "#3", name: "Breadcrumb Types" },
+          ].map(({ active, href, name }, i) => (
+            <Breadcrumb.Item active={active} href={href} key={i}>
+              {name}
+            </Breadcrumb.Item>
+          ))}
+        </Breadcrumb>,
       );
       expect(component.toJSON()).toMatchSnapshot();
     }),
@@ -93,25 +42,17 @@ describe("Breadcrumb component", () => {
 
   it("should use inline style and custom size", () => {
     const component = renderer.create(
-      <Breadcrumb
-        style={{ marginTop: 10 }}
-        size="large"
-        items={[
-          {
-            name: "Home",
-            url: "/",
-          },
-          {
-            name: "Section",
-            url: "/section",
-          },
-          {
-            active: true,
-            name: "Details",
-            url: "/detail",
-          },
-        ]}
-      />,
+      <Breadcrumb style={{ marginTop: 10 }} size="large">
+        {[
+          { href: "/", name: "Home" },
+          { href: "/section", name: "Section" },
+          { active: true, href: "/detail", name: "Details" },
+        ].map(({ active, href, name }, i) => (
+          <Breadcrumb.Item active={active} href={href} key={i}>
+            {name}
+          </Breadcrumb.Item>
+        ))}
+      </Breadcrumb>,
     );
     expect(component.toJSON()).toMatchSnapshot();
   });
diff --git a/src/components/breadcrumb/breadcrumb-item.tsx b/src/components/breadcrumb/breadcrumb-item.tsx
new file mode 100644
index 00000000..5d907982
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-item.tsx
@@ -0,0 +1,26 @@
+import { cx } from "emotion";
+import React from "react";
+
+import { forwardRefAs } from "@/components/exotic";
+import { ModifierProps, transformModifiers } from "@/modifiers";
+
+export interface BreadcrumbItemModifierProps {
+  active?: boolean;
+}
+
+export type BreadcrumbItemProps = Prefer<
+  ModifierProps & BreadcrumbItemModifierProps,
+  React.HTMLAttributes<HTMLElement>
+>;
+
+export const BreadcrumbItem = forwardRefAs<BreadcrumbItemProps, "a">(
+  (props, ref) => {
+    const { as, active, ...rest } = transformModifiers(props);
+    return (
+      <li className={cx({ "is-active": active }) || undefined}>
+        {React.createElement(as!, { ref, ...rest })}
+      </li>
+    );
+  },
+  "a",
+);
diff --git a/src/components/breadcrumb/breadcrumb.story.tsx b/src/components/breadcrumb/breadcrumb.story.tsx
index 5664e20c..57209d9d 100644
--- a/src/components/breadcrumb/breadcrumb.story.tsx
+++ b/src/components/breadcrumb/breadcrumb.story.tsx
@@ -4,7 +4,6 @@ import React from "react";
 
 import { Box } from "@/components/box";
 import { Breadcrumb } from "@/components/breadcrumb";
-import { BreadcrumbProps } from "@/components/breadcrumb/breadcrumb";
 
 const makeSeparator = () =>
   select(
@@ -19,45 +18,44 @@ const makeSeparator = () =>
   );
 
 const items = [
-  {
-    name: "Storybook",
-    url: "#1",
-  },
-  {
-    name: "Breadcrumb",
-    url: "#2",
-  },
-  {
-    active: true,
-    name: "Breadcrumb Types",
-    url: "#3",
-  },
+  { href: "#1", name: "Storybook" },
+  { href: "#2", name: "Breadcrumb" },
+  { active: true, href: "#3", name: "Breadcrumb Types" },
 ];
 
 storiesOf("Breadcrumb", module)
   .add("Default", () => (
     <div>
       <Box>
-        <Breadcrumb separator={makeSeparator()} items={items} />
+        <Breadcrumb separator={makeSeparator()}>
+          {items.map(({ active, href, name }, i) => (
+            <Breadcrumb.Item active={active} href={href} key={i}>
+              {name}
+            </Breadcrumb.Item>
+          ))}
+        </Breadcrumb>
       </Box>
     </div>
   ))
   .add("Use Custom render Element", () => {
-    const Anchor = ({ children, unselectable, ...props }: BreadcrumbProps) => (
-      <a className="Others" {...props}>
-        {children}
-      </a>
+    const Link: React.FC<{ children: React.ReactNode; to: string }> = props => (
+      <a href={props.to}>{props.children}</a>
     );
-
     return (
       <div>
         <Box>
-          <Breadcrumb<typeof Anchor>
-            as={Anchor}
-            hrefAttr="href"
-            separator={makeSeparator()}
-            items={items}
-          />
+          <Breadcrumb separator={makeSeparator()}>
+            {items.map(({ active, href: to, name }, i) => (
+              <Breadcrumb.Item<typeof Link>
+                as={Link}
+                active={active}
+                to={to}
+                key={i}
+              >
+                {name}
+              </Breadcrumb.Item>
+            ))}
+          </Breadcrumb>
         </Box>
       </div>
     );
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
index e598b1bb..f80c69e3 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -3,19 +3,20 @@ import React from "react";
 
 import { forwardRefAs } from "@/components/exotic";
 import { ModifierProps, transformModifiers } from "@/modifiers";
+import { tuple } from "@/utils";
+import { BreadcrumbItem } from "./breadcrumb-item";
 
-export interface BreadcrumbItemProps {
-  url: string;
-  active?: boolean;
-  name?: React.ReactNode;
-}
+export const BREADCRUMB_SEPARATORS = tuple(
+  "arrow",
+  "bullet",
+  "dot",
+  "succeeds",
+);
+export type BreadcrumbSeparators = (typeof BREADCRUMB_SEPARATORS)[number];
 
 export type BreadcrumbModifierProps = Partial<{
   align: "right" | "center";
-  className: string;
-  hrefAttr: string;
-  items: BreadcrumbItemProps[];
-  separator: "arrow" | "bullet" | "dot" | "succeeds";
+  separator: BreadcrumbSeparators;
   size: "small" | "medium" | "large";
 }>;
 
@@ -24,47 +25,27 @@ export type BreadcrumbProps = Prefer<
   React.HTMLAttributes<HTMLElement>
 >;
 
-// TODO: should split up Breadcrumb -> Breadcrumb & BreadcrumbItem
-// this is because the `ref` is passed down to the breadcrumb container
-// but the `as` is passed to the bredcrumb item.
-// Ergo: the type system expects `as` to be compatible with the `Ref<type>`,
-// but it won't be. (the item defaults to an <a>, and the container is fixed as
-// a<nav>)
-export const Breadcrumb = forwardRefAs<BreadcrumbProps, "a">((props, ref) => {
-  const {
-    align,
-    as,
-    hrefAttr,
-    items,
-    separator,
-    size,
-    ...rest
-  } = transformModifiers(props);
-  rest.className = cx("breadcrumb", rest.className, {
-    [`has-${separator}-separator`]: separator,
-    [`is-${align}`]: align,
-    [`is-${size}`]: size,
-  });
+export const Breadcrumb = Object.assign(
+  forwardRefAs<BreadcrumbProps, "nav">((props, ref) => {
+    const {
+      align,
+      as,
+      children,
+      separator,
+      size,
+      ...rest
+    } = transformModifiers(props);
+    rest.className = cx("breadcrumb", rest.className, {
+      [`has-${separator}-separator`]: separator,
+      [`is-${align}`]: align,
+      [`is-${size}`]: size,
+    });
 
-  return (
-    <nav {...rest} ref={ref}>
-      <ul>
-        {items!.map(item => {
-          const itemProps: { [s: string]: BreadcrumbItemProps["url"] } = {};
-          if (as === "a") {
-            itemProps.href = item.url;
-          } else if (typeof hrefAttr === "string") {
-            itemProps[hrefAttr] = item.url;
-          }
-          return (
-            <li key={item.url} className={cx({ "is-active": item.active })}>
-              {React.createElement(as!, itemProps, item.name)}
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
-  );
-}, "a");
-
-Breadcrumb.defaultProps = Object.assign({ items: [] }, Breadcrumb.defaultProps);
+    return (
+      <nav {...rest} ref={ref}>
+        <ul>{children}</ul>
+      </nav>
+    );
+  }, "nav"),
+  { Item: BreadcrumbItem },
+);
diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
index 2d1ad9d6..bbf7f12f 100644
--- a/src/components/tabs/tab.tsx
+++ b/src/components/tabs/tab.tsx
@@ -12,18 +12,16 @@ export type TabModifierProps = Partial<{
 
 export type TabProps = ModifierProps & TabModifierProps;
 
-// TODO: ref passed to `li` but `as` passed to createElement (default as `a`)
 export const Tab = forwardRefAs<TabModifierProps, "a">((props, ref) => {
   const { as, active, className, style, ...rest } = transformModifiers(props);
   return (
     <li
-      ref={ref}
       style={style}
       className={cx(className, {
         "is-active": active,
       })}
     >
-      {React.createElement(as!, { ...rest })}
+      {React.createElement(as!, { ref, ...rest })}
     </li>
   );
 }, "a");
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index 09a07327..531e3fb3 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -9,7 +9,9 @@ export type TabsModifierProps = Partial<{
   align: "centered" | "right";
   fullwidth: boolean;
   size: "small" | "medium" | "large";
-  /** This is called style on Bulma documentation */
+  /**
+   * This is called style on Bulma documentation
+   */
   type: "toggle" | "boxed" | "toggle-rounded";
 }>;
 
@@ -30,7 +32,6 @@ export const Tabs = Object.assign(
       [`is-${align}`]: align,
       [`is-${size}`]: size,
       "is-fullwidth": fullwidth,
-      // todo: Bulma 0.6.2 is not releaset ATM
       "is-toggle": type === "toggle-rounded",
       [`is-${type}`]: type,
     });