Breadcrumb

package breadcrumb

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the breadcrumb: one BreadcrumbList.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<nav aria-label="breadcrumb" data-slot="breadcrumb" class={p.Class} {...p.Attrs}>{p.Children}</nav>

package breadcrumb

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the list: the items and the separators between them.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<ol data-slot="breadcrumb-list" class={gx.Cx("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5", p.Class)} {...p.Attrs}>{p.Children}</ol>

package breadcrumb

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the item: a BreadcrumbLink, a BreadcrumbPage or a
  // BreadcrumbEllipsis.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<li data-slot="breadcrumb-item" class={gx.Cx("inline-flex items-center gap-1.5", p.Class)} {...p.Attrs}>{p.Children}</li>

package breadcrumb

props {
  // Href is the URL of the link.
  Href     gx.URL
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the link label.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<a href={p.Href} data-slot="breadcrumb-link" class={gx.Cx("transition-colors hover:text-foreground", p.Class)} {...p.Attrs}>{p.Children}</a>

package breadcrumb

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the label of the current page.
  Children gx.Node
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" class={gx.Cx("font-normal text-foreground", p.Class)} {...p.Attrs}>{p.Children}</span>

package breadcrumb

import "github.com/alternayte/gx/registry/icons"

props {
  // Class adds classes to the root element.
  Class    string = ""
  // Children is the content of the separator. A nil value renders a chevron icon.
  Children gx.Node = nil
  // Attrs adds HTML attributes to the root element.
  Attrs    gx.Attrs = nil
}

<li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" class={gx.Cx("[&>svg]:size-3.5", p.Class)} {...p.Attrs}>
  if p.Children != nil {
    {p.Children}
  } else {
    <icons.ChevronRight />
  }
</li>

package breadcrumb

import "github.com/alternayte/gx/registry/icons"

props {
  // Class adds classes to the root element.
  Class string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs gx.Attrs = nil
}

<span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" class={gx.Cx("flex size-9 items-center justify-center", p.Class)} {...p.Attrs}>
  <icons.Ellipsis class="size-4" />
  <span class="sr-only">More</span>
</span>

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbFixtures = gx.Fixtures[BreadcrumbProps]{
	"Trail": {Children: BreadcrumbList(BreadcrumbListProps{Children: gx.Frag(
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbLink(BreadcrumbLinkProps{Href: gx.URL("/"), Children: gx.Text("Home")})}),
		BreadcrumbSeparator(BreadcrumbSeparatorProps{}),
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbLink(BreadcrumbLinkProps{Href: gx.URL("/docs"), Children: gx.Text("Docs")})}),
		BreadcrumbSeparator(BreadcrumbSeparatorProps{}),
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbPage(BreadcrumbPageProps{Children: gx.Text("Breadcrumb")})}),
	)})},
	"Ellipsis": {Children: BreadcrumbList(BreadcrumbListProps{Children: gx.Frag(
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbLink(BreadcrumbLinkProps{Href: gx.URL("/"), Children: gx.Text("Home")})}),
		BreadcrumbSeparator(BreadcrumbSeparatorProps{}),
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbEllipsis(BreadcrumbEllipsisProps{})}),
		BreadcrumbSeparator(BreadcrumbSeparatorProps{}),
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbPage(BreadcrumbPageProps{Children: gx.Text("Breadcrumb")})}),
	)})},
	"CustomSeparator": {Children: BreadcrumbList(BreadcrumbListProps{Children: gx.Frag(
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbLink(BreadcrumbLinkProps{Href: gx.URL("/"), Children: gx.Text("Home")})}),
		BreadcrumbSeparator(BreadcrumbSeparatorProps{Children: gx.Text("/")}),
		BreadcrumbItem(BreadcrumbItemProps{Children: BreadcrumbPage(BreadcrumbPageProps{Children: gx.Text("Breadcrumb")})}),
	)})},
}

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbEllipsisFixtures = gx.Fixtures[BreadcrumbEllipsisProps]{"Default": {}}

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbItemFixtures = gx.Fixtures[BreadcrumbItemProps]{"Empty": {}}

// BreadcrumbItemWrap renders the item inside a list, as a page uses it.
func BreadcrumbItemWrap(n gx.Node) gx.Node {
	return BreadcrumbList(BreadcrumbListProps{Children: n})
}

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbLinkFixtures = gx.Fixtures[BreadcrumbLinkProps]{"Link": {Href: gx.URL("/"), Children: gx.Text("Home")}}

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbListFixtures = gx.Fixtures[BreadcrumbListProps]{"Empty": {}}

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbPageFixtures = gx.Fixtures[BreadcrumbPageProps]{"Page": {Children: gx.Text("Page")}}

package breadcrumb

import "github.com/alternayte/gx"

var BreadcrumbSeparatorFixtures = gx.Fixtures[BreadcrumbSeparatorProps]{"Default": {}}

// BreadcrumbSeparatorWrap renders the separator inside a list, as a page
// uses it.
func BreadcrumbSeparatorWrap(n gx.Node) gx.Node {
	return BreadcrumbList(BreadcrumbListProps{Children: n})
}