diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex
index 484f156b..91ce5b58 100644
--- a/apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent.ex
@@ -44,6 +44,7 @@ defmodule Phoenix.WebComponent do
       alias Phoenix.WebComponent.Link
       alias Phoenix.WebComponent.Actionbar
       alias Phoenix.WebComponent.Appbar
+      alias Phoenix.WebComponent.Breadcrumb
       alias Phoenix.WebComponent.Card
       alias Phoenix.WebComponent.LeftMenu
       alias Phoenix.WebComponent.Markdown
@@ -68,6 +69,7 @@ defmodule Phoenix.WebComponent do
       import Phoenix.WebComponent.Link
       import Phoenix.WebComponent.Actionbar
       import Phoenix.WebComponent.Appbar
+      import Phoenix.WebComponent.Breadcrumb
       import Phoenix.WebComponent.Card
       import Phoenix.WebComponent.LeftMenu
       import Phoenix.WebComponent.Markdown
diff --git a/apps/phoenix_webcomponent/lib/phoenix_webcomponent/breadcrumb.ex b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/breadcrumb.ex
new file mode 100644
index 00000000..8a1c615a
--- /dev/null
+++ b/apps/phoenix_webcomponent/lib/phoenix_webcomponent/breadcrumb.ex
@@ -0,0 +1,79 @@
+defmodule Phoenix.WebComponent.Breadcrumb do
+  @moduledoc """
+  render appbar
+
+  """
+  use Phoenix.WebComponent, :html
+
+  @doc """
+  Generates webcomponent breadcrumb
+  ## Example
+      <.wc_breadcrumb>
+        <:crumb>Menu1</:crumb>
+        <:crumb>Menu2</:crumb>
+      </.wc_breadcrumb>
+  """
+  @doc type: :component
+  attr(:id, :any,
+    default: false,
+    doc: """
+    html attribute id
+    """
+  )
+
+  attr(:class, :string,
+    default: "",
+    doc: """
+    html attribute class
+    """
+  )
+
+  slot(:icon,
+    required: false,
+    doc: """
+    Render Icon
+    """
+  )
+
+  slot(:crumb,
+    required: true,
+    doc: """
+    Render menu
+    """
+  ) do
+    attr(:id, :any)
+    attr(:class, :string)
+    attr(:to, :string)
+  end
+
+  def wc_breadcrumb(assigns) do
+    assigns =
+      assigns
+      |> assign_new(:id, fn -> false end)
+      |> assign_new(:class, fn -> "" end)
+
+    ~H"""
+    <div id={@id} class={[
+      "flex flex-row justify-start items-center gap-2",
+      "w-full px-4",
+      @class,
+    ]}>
+      <%= if length(@icon) > 0 do %>
+      <%= render_slot(@icon) %>
+      <% else %>
+      <Phoenix.WebComponent.Icons.wc_mdi name="home" class="w-4 h-4" />
+      <% end %>
+      <%= for {crumb, i} <- Enum.with_index(@crumb) do %>
+      <span class="flex flex-row">
+        <%= render_slot(crumb) %>
+      </span>
+      <%= if i + 1 < length(@crumb) do %>
+      <span class="flex flex-row">
+        /
+      </span>
+      <% end %>
+      <% end %>
+    </div>
+    """
+  end
+end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs
new file mode 100644
index 00000000..acec8c46
--- /dev/null
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/storybook/components/breadcrumb.story.exs
@@ -0,0 +1,49 @@
+defmodule PhxWCStorybookWeb.Storybook.Components.Breadcrumb do
+  # :live_component or :page are also available
+  use PhxLiveStorybook.Story, :component
+
+  def function, do: &Phoenix.WebComponent.Breadcrumb.wc_breadcrumb/1
+  def description, do: "A breadcrumb element."
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        attributes: %{
+          class: "shadow"
+        },
+        slots: [
+          """
+          <:crumb>
+            <a href="/">Home</a>
+          </:crumb>
+          <:crumb>
+            <button>Page</button>
+          </:crumb>
+          """
+        ]
+      },
+      %Variation{
+        id: :custom_icon,
+        attributes: %{
+          class: "bg-white text-slate-600"
+        },
+        slots: [
+          """
+          <:icon>
+          <Phoenix.WebComponent.Icons.wc_mdi name="home-assistant" class="w-4 h-4" />
+          </:icon>
+          """,
+          """
+          <:crumb>
+            <a href="/">Home</a>
+          </:crumb>
+          <:crumb>
+            <button>Page</button>
+          </:crumb>
+          """
+        ]
+      }
+    ]
+  end
+end
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
index d66e11f0..b31cae26 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/layout/app.html.heex
@@ -5,43 +5,46 @@
     class="w-48 h-[calc(100vh-56px)] bg-slate-100"
     active={assigns[:active_menu]}
   >
-  <:title class="text-slate-400 font-bold">
-    WebComponent
-  </:title>
-  <:menu>
-    <.wc_left_menu_group active={assigns[:active_menu]}>
-      <:title>Hooks</:title>
-      <:menu id="phx-wc-hook" to={"/"}>
-        <.wc_mdi name={"webhook"} class="w-4 h-4" />
-        PhxWCHook
-      </:menu>
-    </.wc_left_menu_group>
-  </:menu>
-  <:menu>
-    <.wc_left_menu_group active={assigns[:active_menu]}>
-      <:title>Icons</:title>
-      <:menu id="mdi" to={"/mdi"}>
-        <.wc_mdi name={"material-design"} class="w-4 h-4" />
-        MD Icon
-      </:menu>
-      <:menu id="bsi" to={"/bsi"}>
-        <.wc_bsi name={"bootstrap"} class="w-4 h-4" />
-        BS Icon
-      </:menu>
-    </.wc_left_menu_group>
-  </:menu>
-  <:menu>
-    <.wc_left_menu_group active={assigns[:active_menu]}>
-      <:title>Components</:title>
-      <:menu id="table" to="/storybook/components/actionbar"><.wc_bsi name={"tools"} class="w-4 h-4" />Actionbar</:menu>
-      <:menu id="card" to="/storybook/components/card"><.wc_mdi name={"card"} class="w-4 h-4" />Card</:menu>
-      <:menu id="left_menu" to="/storybook/components/left_menu"><.wc_bsi name={"layout-sidebar"} class="w-4 h-4" />Left Menu</:menu>
-      <:menu id="markdown" to="/storybook/components/markdown"><.wc_bsi name={"markdown"} class="w-4 h-4" />Markdown</:menu>
-      <:menu id="modal" to="/storybook/components/modal"><.wc_bsi name={"chat-square"} class="w-4 h-4" />Modal</:menu>
-      <:menu id="pagination" to="/storybook/components/pagination"><.wc_mdi name={"book-open-page-variant-outline"} class="w-4 h-4" />Pagination</:menu>
-      <:menu id="table" to="/storybook/components/table"><.wc_mdi name={"table"} class="w-4 h-4" />Table</:menu>
-    </.wc_left_menu_group>
-  </:menu>
+    <:title class="text-slate-400 font-bold">
+      WebComponent
+    </:title>
+    <:menu>
+      <.wc_left_menu_group active={assigns[:active_menu]}>
+        <:title>Hooks</:title>
+        <:menu id="phx-wc-hook" to={"/"}>
+          <.wc_mdi name={"webhook"} class="w-4 h-4" />
+          PhxWCHook
+        </:menu>
+      </.wc_left_menu_group>
+    </:menu>
+    <:menu>
+      <.wc_left_menu_group active={assigns[:active_menu]}>
+        <:title>Icons</:title>
+        <:menu id="mdi" to={"/mdi"}>
+          <.wc_mdi name={"material-design"} class="w-4 h-4" />
+          MD Icon
+        </:menu>
+        <:menu id="bsi" to={"/bsi"}>
+          <.wc_bsi name={"bootstrap"} class="w-4 h-4" />
+          BS Icon
+        </:menu>
+      </.wc_left_menu_group>
+    </:menu>
+    <:menu>
+      <.wc_left_menu_group active={assigns[:active_menu]}>
+        <:title>Components</:title>
+        <:menu id="actionbar" to="/storybook/components/actionbar"><.wc_bsi name={"tools"} class="w-4 h-4" />Actionbar</:menu>
+        <:menu id="breadcrumb" to="/storybook/components/breadcrumb"><.wc_bsi name={"segmented-nav"} class="w-4 h-4" />Breadcrumb</:menu>
+        <:menu id="card" to="/storybook/components/card"><.wc_bsi name={"card-text"} class="w-4 h-4" />Card</:menu>
+        <:menu id="left_menu" to="/storybook/components/left_menu"><.wc_bsi name={"layout-sidebar"} class="w-4 h-4" />Left Menu</:menu>
+        <:menu id="markdown" to="/storybook/components/markdown"><.wc_bsi name={"markdown"} class="w-4 h-4" />Markdown</:menu>
+        <:menu id="modal" to="/storybook/components/modal"><.wc_bsi name={"chat-square"} class="w-4 h-4" />Modal</:menu>
+        <:menu id="pagination" to="/storybook/components/pagination"><.wc_mdi name={"book-open-page-variant-outline"} class="w-4 h-4" />Pagination</:menu>
+        <:menu id="table" to="/storybook/components/table"><.wc_mdi name={"table"} class="w-4 h-4" />Table</:menu>
+      </.wc_left_menu_group>
+    </:menu>
   </.wc_left_menu>
+  <div class="flex flex-col flex-auto">
   <%= @inner_content %>
+  </div>
 </main>
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/bsi.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/bsi.html.heex
index 00168d1e..db82d25a 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/bsi.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/bsi.html.heex
@@ -1,3 +1,7 @@
+<.wc_breadcrumb class="bg-white h-6 text-slate-400">
+    <:crumb>Icon</:crumb>
+    <:crumb>Bootstrap Icon</:crumb>
+</.wc_breadcrumb>
 <.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto">
     <:title class="flex flex-row justify-center items-center">
         <span class="text-4xl text-blue-600 hover:text-blue-400">
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex
index 89b17cf0..3db5cda4 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/index.html.heex
@@ -1,4 +1,7 @@
-
+<.wc_breadcrumb class="bg-white h-6 text-slate-400">
+    <:crumb>Hooks</:crumb>
+    <:crumb>PhxWCHook</:crumb>
+</.wc_breadcrumb>
 <.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto">
     <:title class="flex flex-row justify-center items-center">
         <span class="text-4xl text-blue-600 hover:text-blue-400">
diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex
index c5f00e8b..704db467 100644
--- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex
+++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/templates/page/mdi.html.heex
@@ -1,3 +1,7 @@
+<.wc_breadcrumb class="bg-white h-6 text-slate-400">
+    <:crumb>Icon</:crumb>
+    <:crumb>Material Design Icon</:crumb>
+</.wc_breadcrumb>
 <.wc_card class="w-[100%_!important] h-[calc(100vh-56px-2em)_!important] overflow-auto">
     <:title class="flex flex-row justify-center items-center">
         <span class="text-4xl text-blue-600 hover:text-blue-400">