Components Breadcrumbs

Breadcrumbs

Breadrumbs allow a user to easily navigate their way back to each page they have navigated from to get to the current page.
Slash
heex 
          <.breadcrumbs links={[
  %{ label: "Link 1", to: "#" },
  %{ label: "Link 2", to: "#" },
  %{ label: "Link 3", to: "#" }
]}/>
Chevron
heex 
          <.breadcrumbs separator="chevron" links={[
  %{ label: "Link 1", to: "#" },
  %{ label: "Link 2", to: "#", link_type: "live_patch" },
  %{ label: "Link 3", to: "#", link_type: "live_redirect" }
]}/>
Log in to view
With icon
heex 
          <.breadcrumbs separator="chevron" links={[
  %{to: "#", icon: "hero-home"},
  %{label: "Orgs", to: "#", link_type: "live_patch", icon: "hero-building-office"},
  %{label: "Insights", to: "#", link_type: "live_redirect", icon: "hero-chart-bar-square"}
]}/>
Log in to view
Properties
elixir 
          attr(:separator, :string, default: "slash", values: ["slash", "chevron"])
attr(:class, :string, default: "", doc: "Parent div CSS class")
attr(:separator_class, :string, default: "", doc: "Separator div CSS class")
attr(:link_class, :string, default: "", doc: "Link class CSS")
attr(:links, :list, default: [], doc: "List of your links")
attr(:rest, :global)