hansui

Appearance

Breadcrumbs ​

Shows a trail of navigation links to represent the user’s current page hierarchy.

Features ​

  • Full keyboard navigation
  • Can expand one or multiple items

Anatomy ​

  • Root: The root container for the breadcrumbs

Usage ​

To create a breadcrumbs, you can use the New function as shown in the example at the top of this page, or alternatively, you can follow the Builder or Functional patterns. Be sure to follow the anatomy defined above.

New function

templ
@breadcrumbs.New(url string, props ...*breadcrumbs.Props)
  • url - the url
  • props - - A pointer to the bradcrumbs.Props struct that defines the configuration options for the breadcrumbs (see here).
templ
import "github.com/indaco/hansui/components/breadcrumbs"

@breadcrumbs.New("http://localhost:3300/components/breadcrumbs")
Builder pattern

The Builder pattern creates an instance using method chaining. The With methods, such as WithColor or WithBorderStyle, are chainable configuration functions that allow you to customize various properties of the component:

templ
@breadcrumbs.Builder("http://localhost:3300/components/breadcrumbs").WithoutHomeIcon(true).Render()
Functional pattern

The Functional pattern applies configurations through individual function calls before rendering the button. Like in the Builder pattern, With methods customize the component by setting specific properties:

templ
@breadcrumbs.Render("http://localhost:3300/components/breadcrumbs", breadcrumbs.WithoutHomeIcon(true))

API Reference ​

Below is a list of each struct field, along with its type, default value, and allowed values where applicable.

HomeIcon ​

Optional icon configuration for the home link in the breadcrumbs.

  • type: *hansui.Icon

NoHomeIcon ​

If true, the home icon will not be displayed in the breadcrumbs.

  • type: bool
  • default: false

Separator ​

Defines the separator character or string used between breadcrumb items.

  • type: string
  • default: /