surface_bulma

defmodule SurfaceBulma.Breadcrumb do
  @moduledoc """
  A simple navigation component that is displayed as a breadcrumb
  """

  use Surface.Component

  @doc "The separator that is used to divide breadcrumb items, defaults to a `/`."
  prop separator, :string

  @doc "The alignment of the breadcrumb, defaults to `left`-aligned."
  prop alignment, :string, default: "left"

  @doc "The size of the breadcrumb, possibilities are: \"small\", \"medium\", \"large\""
  prop size, :string, default: "medium"

  def render(assigns) do
    ~H"""
    <nav
      class={{
        "breadcrumb",
        "is-#{@alignment}",
        "has-#{@separator}",
        "is-#{@size}"
      }}
      aria-label="breadcrumbs"
    >
      <ul>
        <li :for={{ item <- @items }}><a href="#">Bulma</a></li>
        <li><a href="#">Documentation</a></li>
        <li><a href="#">Components</a></li>
        <li class="is-active"><a href="#" aria-current="page">Breadcrumb</a></li>
      </ul>
    </nav>
    """
  end
end